Commit d191f8bdd4540bb50b1ddc903c6c3ae4eef3fea7

Authored by Edmar Moretti
1 parent 706b5a3a
Exists in master

Edição do layout

docs/EditorTabelas.html
... ... @@ -55,24 +55,21 @@ Criação de uma tabela com dados geográficos a partir de um shapefile</span>
55 55 <p class="MsoNormal" style="margin-bottom: 0.0001pt;">Para ter acesso
56 56 ao gerenciador de tabelas do i3GeoSaúde, acesse o menu de administração
57 57 e selecione a opção "Gerenciador de tabelas de dados estatísticos
58   -(upload de SHP e CSV)" na linha "Enviar arquivo para o servidor",
59   -conforme a <span style="font-weight: bold;">Figura
60   -1</span>.
  58 +(upload de SHP e CSV)" na linha "Enviar arquivo para o servidor".
61 59 </p>
62 60 <br>
  61 +<div class="imagemExemplo" >
63 62 <img src="imagens/Tutoria1-imagens/figura1.png" style="width: 254px; height: 264px;" alt=""><br>
64   -<span style="font-weight: bold;">Figura
65   -1</span>: Acessando o gerenciador de tabelas.<br>
66   -<br>
  63 +Acessando o gerenciador de tabelas.
  64 +</div>
67 65 <br>
68   -Em seguida, escolha o banco "i3geosaude" e o esquema "i3geo_metaestat",
69   -conforme a figura <span style="font-weight: bold;">Figura
70   -2</span>.<br>
  66 +Em seguida, escolha o banco "i3geosaude" e o esquema "i3geo_metaestat".<br>
71 67 <br>
  68 +<div class="imagemExemplo" >
72 69 <img src="imagens/Tutoria1-imagens/figura2.png" style="width: 623px; height: 289px;" alt="">
73 70 <br>
74   -<span style="font-weight: bold;">Figura
75   -2</span>: Definindo o banco de dados e o esquema a ser criada a tabela.<br>
  71 +Definindo o banco de dados e o esquema a ser criada a tabela.
  72 +</div>
76 73 <br>
77 74 É possível criar uma tabela fazendo o upload de um arquivo Shapefile
78 75 (extensões obrigatórias: ".shp"; ".shx" e; ".dbf"), um arquivo CSV ou
... ... @@ -90,9 +87,10 @@ arquivo que você está inserindo e marque a opção se quiser criar uma
90 87 coluna "gid" para ser utilizado como código único do registro. Por fim,
91 88 clique em enviar.<br>
92 89 <br>
  90 +<div class="imagemExemplo" >
93 91 <img src="imagens/Tutoria1-imagens/figura3.png" style="width: 782px; height: 556px;" alt=""><br>
94   -<span style="font-weight: bold;">Figura
95   -3: </span>Upload de arquivo shapefile<br>
  92 +Upload de arquivo shapefile
  93 +</div>
96 94 <br>
97 95 Caso apareça uma mensagem parecida com a abaixo, o upload foi realizado
98 96 com sucesso:<br>
... ... @@ -134,17 +132,13 @@ das colunas com as latitudes (Y) e longitudes (X). Por fim, clique em
134 132 enviar.<br>
135 133  
136 134 <br>
137   -
  135 +<div class="imagemExemplo" >
138 136 <img style="width: 799px; height: 510px;" alt="" src="imagens/Tutoria1-imagens/figura9.png"><br>
139   -
140   -<span style="font-weight: bold;">Figura 4: </span>Upload de arquivo CSV<br>
141   -
  137 +Upload de arquivo CSV
  138 +</div>
142 139 <br>
143   -
144   -
145 140 Caso apareça uma mensagem parecida com a abaixo, o upload foi realizado
146 141 com sucesso:<br>
147   -
148 142 <dl>
149 143 <dd>
150 144 Incluindo dados</dd><dd>Registros existentes no CSV: 29</dd><dd>Registros na tabela final: 29</dd><dd><b>Feito!!!</b></dd><dd><b>Faça o reload da página </b></dd>
... ... @@ -163,12 +157,12 @@ Incluindo dados&lt;/dd&gt;&lt;dd&gt;Registros existentes no CSV: 29&lt;/dd&gt;&lt;dd&gt;Registros na tab
163 157 informe o nome da nova tabela. <br>
164 158 <br>
165 159 Se quiser editar manualmente uma
166   -tabela, escolha a tabela criada na lista, conforme a <span style="font-weight: bold;">Figura 5</span>. <br>
  160 +tabela, escolha a tabela criada na lista. <br>
167 161 <br>
  162 +<div class="imagemExemplo" >
168 163 <img style="width: 582px; height: 243px;" alt="" src="imagens/Tutoria1-imagens/figura10.png"><br>
169   -
170   -
171   -<span style="font-weight: bold;">Figura 5: </span>Lista de tabelas existentes<br>
  164 +Lista de tabelas existentes
  165 +</div>
172 166 <br>
173 167 Para criar uma nova coluna, escolha a opção "Adicionar uma nova
174 168 coluna". Escolha o nome da nova coluna e o tipo de registro (integer,
... ...
docs/InstalacaoWindows.html
... ... @@ -79,7 +79,7 @@ abra, o Windows Explorer, vá até a pasta c:\ms4w\Apache. &lt;br&gt;
79 79 Botão Direito
80 80 do mouse sobre a pasta "htdocs" e escolha a opção SVN Checkout.<br>
81 81 <br>
82   -<div style=text-align:center; ><img src="imagens/instalacao/Fig1.png" style="width: 252px; height: 341px;" alt="fig1"></div>
  82 +<div class="imagemExemplo" ><img src="imagens/instalacao/Fig1.png" style="width: 252px; height: 341px;" alt="fig1"></div>
83 83 <br>
84 84  
85 85 2. &nbsp;Informe a url do repositório e o
... ... @@ -90,11 +90,11 @@ usuário e senha. Informe os dados do seu cadastro no SPB ou utilize &quot;i3geosaude
90 90 digite http://svn.softwarepublico.gov.br/svn/i3geo/subgrupos/i3geosaude
91 91 <br><br>
92 92 Em "Checkout directory" digite: c:\ms4w\apache\htdocs<br><br>
93   -<div style=text-align:center; ><img src="imagens/instalacao/Fig2.png" style="width: 400px; height: 331px;" alt="fig2"></div>
  93 +<div class="imagemExemplo" ><img src="imagens/instalacao/Fig2.png" style="width: 400px; height: 331px;" alt="fig2"></div>
94 94 <br>
95 95  
96 96 3. &nbsp;Clique em OK e espere terminar o Download dos dados.<br><br>
97   -<div style=text-align:center; ><img src="imagens/instalacao/Fig3.png" style="width: 400px; height: 248px;" alt="fig3"></div>
  97 +<div class="imagemExemplo" ><img src="imagens/instalacao/Fig3.png" style="width: 400px; height: 248px;" alt="fig3"></div>
98 98 <br>Para confirmar que tudo ocorreu bem, abra o navegador de internet e digite http:\\localhost<br>
99 99  
100 100 </div>
... ... @@ -123,22 +123,22 @@ deixe
123 123 habilitada a opção Stack Builder e clique em
124 124 Finish.<br>
125 125 <br>
126   -<div style=text-align:center; ><img src="imagens/instalacao/Fig4.png" style="width: 400px; height: 310px;" alt="fig4"></div><br>
  126 +<div class="imagemExemplo" ><img src="imagens/instalacao/Fig4.png" style="width: 400px; height: 310px;" alt="fig4"></div><br>
127 127 <br>
128 128 4. Selecione o servidor local.<br>
129 129 <br>
130   -<div style=text-align:center; ><img src="imagens/instalacao/Fig5.png" style="width: 400px; height: 272px;" alt="fig5"></div><br>
  130 +<div class="imagemExemplo" ><img src="imagens/instalacao/Fig5.png" style="width: 400px; height: 272px;" alt="fig5"></div><br>
131 131 <br>
132 132 5. Selecione a opção postgis 64bit ou 32bit de
133 133 acordo com
134 134 a instalação do PostgreSQL.<br><br>
135   -<div style=text-align:center; ><img src="imagens/instalacao/Fig6.png" style="width: 400px; height: 272px;" alt="fig6"></div><br>
  135 +<div class="imagemExemplo" ><img src="imagens/instalacao/Fig6.png" style="width: 400px; height: 272px;" alt="fig6"></div><br>
136 136 <br>
137 137 6. Clique em avançar até chegar na tela em que
138 138 é
139 139 pedido a senha informada na instalação do PostgreSQL.<br>
140 140 <br>
141   -<div style=text-align:center; ><img src="imagens/instalacao/Fig7.png" style="width: 400px; height: 311px;" alt="fig7"></div><br>
  141 +<div class="imagemExemplo" ><img src="imagens/instalacao/Fig7.png" style="width: 400px; height: 311px;" alt="fig7"></div><br>
142 142 <br>
143 143 7. No menu iniciar, digite PgAdmin e inicie o programa. Será
144 144 pedido a senha novamente.<br>
... ... @@ -146,37 +146,37 @@ pedido a senha novamente.&lt;br&gt;
146 146 8. Crie um novo banco de dados. Para isso, clique com o botão
147 147 direto do mouse em cima de Databases e depois em New Database.<br>
148 148 <br>
149   -<div style=text-align:center; >
  149 +<div class="imagemExemplo" >
150 150 <img src="imagens/instalacao/Fig8.png" style="width: 333px; height: 277px;" alt="fig8"></div><br>
151 151  
152 152  
153 153 9. Chame-o de i3geosaude<br>
154 154 <br>
155   -<div style=text-align:center; ><img src="imagens/instalacao/Fig9.png" style="width: 378px; height: 249px;" alt="fig9"></div>
  155 +<div class="imagemExemplo" ><img src="imagens/instalacao/Fig9.png" style="width: 378px; height: 249px;" alt="fig9"></div>
156 156 <br>
157 157 <br>
158 158 10. Na aba Definition, preencha-a de acordo com a figura e clique em OK<br>
159 159 <br>
160   -<div style=text-align:center; ><img src="imagens/instalacao/Fig10.png" style="width: 400px; height: 216px;" alt="fig10"></div>
  160 +<div class="imagemExemplo" ><img src="imagens/instalacao/Fig10.png" style="width: 400px; height: 216px;" alt="fig10"></div>
161 161 <br>
162 162 <br>
163 163 11. Clique com o botão direito sobre o banco i3geosaude e em
164 164 seguida em Restore<br>
165 165 <br>
166   -<div style=text-align:center; ><img src="imagens/instalacao/Fig11.png" style="width: 326px; height: 347px;" alt="fig11"></div>
  166 +<div class="imagemExemplo" ><img src="imagens/instalacao/Fig11.png" style="width: 326px; height: 347px;" alt="fig11"></div>
167 167 <br>
168 168 <br>
169 169 12. Selecione o arquivo databasei3geosaude.backup que se encontra no
170 170 diretório C:\ms4w\Apache\htdocs, depois clique em Restore.
171 171 <br>
172 172 <br>
173   -<div style=text-align:center; ><img src="imagens/instalacao/Fig12.png" style="width: 400px; height: 329px;" alt="fig12"></div>
  173 +<div class="imagemExemplo" ><img src="imagens/instalacao/Fig12.png" style="width: 400px; height: 329px;" alt="fig12"></div>
174 174 <br>
175 175 <br>
176 176 13. Selecione o banco i3geosaude e em seguida clique na
177 177 opção SQL<br>
178 178 <br>
179   -<div style=text-align:center; ><img src="imagens/instalacao/Fig13.png" style="width: 282px; height: 277px;" alt="fig13"></div>
  179 +<div class="imagemExemplo" ><img src="imagens/instalacao/Fig13.png" style="width: 282px; height: 277px;" alt="fig13"></div>
180 180 <br>
181 181 <br>
182 182 14. Na janela que se abrirá, clique na
... ... @@ -185,19 +185,19 @@ e selecione o arquivo
185 185 "legacy_minimal.sql" que fica no diretório: <span style="font-weight: bold;">C:\Program
186 186 Files\PostgreSQL\9.2\share\contrib\postgis-2.0\</span><br style="font-weight: bold;">
187 187 <br>
188   -<div style=text-align:center; ><img src="imagens/instalacao/Fig14.png" style="width: 400px; height: 245px;" alt="fig14"></div>
  188 +<div class="imagemExemplo" ><img src="imagens/instalacao/Fig14.png" style="width: 400px; height: 245px;" alt="fig14"></div>
189 189 <br>
190 190 <br>
191 191 15. Clique no botão Execute query.<br>
192 192 <br>
193   -<div style=text-align:center; ><img src="imagens/instalacao/Fig15.png" style="width: 400px; height: 246px;" alt="fig16"></div>
  193 +<div class="imagemExemplo" ><img src="imagens/instalacao/Fig15.png" style="width: 400px; height: 246px;" alt="fig16"></div>
194 194 <br>
195 195 <br>
196 196 16. Feche a janela de consulta<br>
197 197 No seu navegador de preferência digite: http://localhost/ e
198 198 comece a trabalhar!!!<br>
199 199 <br>
200   -<div style=text-align:center; ><img src="imagens/instalacao/Fig16.png" style="width: 400px; height: 213px;" alt="fig16"></div>
  200 +<div class="imagemExemplo" ><img src="imagens/instalacao/Fig16.png" style="width: 400px; height: 213px;" alt="fig16"></div>
201 201 </div>
202 202 <div class="trail-box-bottom">
203 203 <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>
... ...
docs/admin_acesso.html
1 1 <!DOCTYPE html>
2 2 <html><head>
3   -
4   -
5   -
6   -
7 3 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
8 4 <meta charset="UTF-8"><title>i3GeoSaude</title>
9   -
10 5 <link media="screen" href="./files/estilos.css" type="text/css" rel="stylesheet">
11 6 <link rel="stylesheet" type="text/css" href="./files/estilos.css"></head><body class="blue-bg">
12 7 <div id="wrapper-flex">
... ... @@ -23,13 +18,13 @@ Para isso utilize a opção existente na parte
23 18 superior da
24 19 página e no formulário de
25 20 autenticação
26   -utilize o nome de usuário "i3geosaude" e a senha "i3geosaude" (Figura
27   -1).<br>
  21 +utilize o nome de usuário "i3geosaude" e a senha "i3geosaude".<br>
28 22 &nbsp;<br>
  23 +<div class="imagemExemplo">
29 24 <img src="imagens/admin_acesso_login.png" style="width: 553px; height: 362px;" alt="Login Administrativo"><br>
30   -<span style="font-weight: bold;">Figura
31   -1: </span>Autenticação
  25 +Autenticação
32 26 como usuário Administrativo (i3geosaude).
  27 +</div>
33 28 <br><br>
34 29  
35 30 <div class="trail-box">
... ... @@ -69,7 +64,7 @@ alguns
69 64 botões de acesso rápido para as
70 65 funções de
71 66 uso mais comum. Todas as ferramentas de administração são apresentadas
72   -no menu cascata localizado à esquerda (Figura 2). Cada opção é
  67 +no menu cascata localizado à esquerda. Cada opção é
73 68 apresentada em uma linha
74 69 que deve ser
75 70 expandida para se ter acesso às
... ... @@ -77,9 +72,10 @@ operações. Por meio desse menu é permitido ao administrador do sistema
77 72 ações como testar a instalação do i3geo, cadastrar e manipualar dados e
78 73 metadados, configurar serviços etc.<br><br>As principais operações de administração que afetam o uso de cartogramas pelo i3GeoSaúde encontram-se no item chamado "Metadados estatísticos".<br>
79 74 <br>
  75 +<div class="imagemExemplo">
80 76 <img src="imagens/admin_menu1reduzido.png" style="width: 180px; height: 372px;" alt="visão parcial do menu administrador"><br>
81   -<span style="font-weight: bold;">Figura
82   -2: </span>Ferramentas de administração do i3GeoSaúde
  77 +Ferramentas de administração do i3GeoSaúde
  78 +</div>
83 79 &nbsp;&nbsp;<a href="index.html"><br>
84 80 </a></div>
85 81 <div class="trail-box-bottom">
... ...
docs/admin_catalogo.html
1 1 <!DOCTYPE html>
2 2 <html><head>
3   -
4   -
5 3 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
6   -
7   -
8 4 <meta charset="UTF-8"><title>Operando o catálogo do i3GeoSaude</title>
9   -
10   -
11   -
12   -
13 5 <link media="screen" href="./files/estilos.css" type="text/css" rel="stylesheet">
14   -
15   -
16 6 <link rel="stylesheet" type="text/css" href="./files/estilos.css"></head><body class="blue-bg">
17   -
18 7 <div id="wrapper-flex">
19 8 <div style="background-color: white;">
20 9 <div class="f-page-auto-cell" id="doc">
... ... @@ -67,22 +56,22 @@ móvel.&lt;br&gt;
67 56 catálogo</h1>
68 57 </div>
69 58 <div class="trail-box-content">Para ter acesso à barra de catálogo,
70   -abra a guia lateral conforme a <span style="font-weight: bold;">Figura
71   -1</span> e clique no botão <span style="font-weight: bold;">Catálogo</span>
  59 +abra a guia lateral e clique no botão <span style="font-weight: bold;">Catálogo</span>
72 60 <img style="width: 38px; height: 35px;" alt="" src="imagens/AdminCatalogo/figura13.jpg">.<br>
73 61 <br>
  62 +<div class="imagemExemplo" >
74 63 <img style="width: 333px; height: 296px;" alt="" src="imagens/Interface/guialateral.jpg"><br>
75   -<span style="font-weight: bold;">Figura 1</span>: Acesso ao catálogo
76   -pela guia lateral<br>
  64 +Acesso ao catálogo
  65 +pela guia lateral</div>
77 66 <br>
78 67 O catálogo apresenta uma barra de
79   -ícones com as seguintes opções:<br>
80   -<p class="MsoNormal" style="margin-bottom: 0.0001pt;">&nbsp;
81   -&nbsp;
82   -&nbsp; <img style="width: 201px; height: 26px;" alt="figura1" src="imagens/AdminCatalogo/figura1.jpg"><br>
83   -&nbsp; &nbsp; &nbsp;&nbsp; <span style="font-weight: bold;">Figura 2</span>:
  68 +ícones com as seguintes opções:<br><br>
  69 +
  70 +<div class="imagemExemplo" >
  71 +<img style="width: 201px; height: 26px;" alt="figura1" src="imagens/AdminCatalogo/figura1.jpg"><br>
84 72 Ícones de opções de
85   -catálogos de temas</p>
  73 +catálogos de temas</div>
  74 +<br>
86 75 <ul>
87 76 <li>A ferramenta <span style="font-weight: bold;">Refresh</span><small style="font-weight: bold;">,</small>
88 77 representada pelo ícone <img style="width: 22px; height: 24px;" alt="figura2" src="imagens/AdminCatalogo/figura2.jpg">,&nbsp;
... ... @@ -100,9 +89,10 @@ apresentando opções de conexão com
100 89 serviços.</li>
101 90 </ul>
102 91 &nbsp; <br>
103   -&nbsp;&nbsp; <img style="width: 266px; height: 159px;" alt="figura3" src="imagens/AdminCatalogo/figura11.jpg"><br>
104   -&nbsp; &nbsp;<span style="font-weight: bold;"> Figura 3</span>:
105   -Opções de serviços.<br>
  92 +<div class="imagemExemplo" >
  93 +<img style="width: 266px; height: 159px;" alt="figura3" src="imagens/AdminCatalogo/figura11.jpg"><br>
  94 +Opções de serviços.
  95 +</div>
106 96 <br>
107 97 <ul>
108 98 <li>O Upload é
... ... @@ -113,13 +103,14 @@ dados locais ao servidor para inclusão no mapa. É
113 103 possível utilizar dados nos formatos
114 104 “SHAPEFILE”,
115 105 DBF, CSV, GPX, KML ou KMZ
116   -conforme, visualizado na <span style="font-weight: bold;">Figura 4</span>.</li>
  106 +.</li>
117 107 </ul>
118 108 <br>
119   -&nbsp; &nbsp;<img style="width: 258px; height: 145px;" alt="figura3" src="imagens/AdminCatalogo/figura12.jpg"><br>
120   -<span style="font-weight: bold;">Figura 4</span>:
  109 +<div class="imagemExemplo" >
  110 +<img style="width: 258px; height: 145px;" alt="figura3" src="imagens/AdminCatalogo/figura12.jpg"><br>
121 111 Opções
122   -de Upload de arquivos.<br>
  112 +de Upload de arquivos.
  113 +</div>
123 114 <br>
124 115 <ul>
125 116 <li>O&nbsp;<span style="font-weight: bold;"></span>
... ... @@ -194,7 +185,7 @@ mapa
194 185 <li>O ícone <img style="width: 20px; height: 20px;" alt="" src="imagens/AdminCatalogo/figura15.jpg"> abre a janela flutuante para a edição e análise dos <span style="font-weight: bold;">Cartogramas estatísticos</span>.<br>
195 186 </li>
196 187  
197   -</ul><br>
  188 +</ul>
198 189  
199 190 </div>
200 191 <div class="trail-box-bottom"><img src="files/trails-box-br.png" class="right" alt="" height="6" width="7"> <img src="files/trails-box-bl.png" class="left" alt="" height="6" width="7">
... ... @@ -215,14 +206,15 @@ temas&lt;/h1&gt;
215 206 de ícones é mostrada uma árvore que
216 207 permite o
217 208 acesso aos temas pré-configurados pelo administrador do
218   -sistema,&nbsp;como pode ser visto na
219   -<span style="font-weight: bold;">Figura 5</span>.<br>
  209 +sistema.<br>
220 210 <br>
221 211 <br>
  212 +<div class="imagemExemplo" >
222 213 <img src="imagens/AdminCatalogo/arvore_temas_exemplo.jpg" alt="exemplo de uma árvore de temas" style="width: 378px; height: 580px;"><br>
223   -<span style="font-weight: bold;">
224   -Figura 5:</span> Exemplo de uma
225   -árvore de temas</p>
  214 +Exemplo de uma
  215 +árvore de temas
  216 +</div>
  217 +<br>
226 218 <p class="MsoNormal" style="margin-bottom: 0.0001pt;">Existem quatro
227 219 tipos de árvores básicas: serviços,
228 220 temas
... ... @@ -293,11 +285,13 @@ uma das funções de determinado sistema
293 285 é escolhida.</li>
294 286 </ul>
295 287 <br>Observe que alguns itens aparecem em vermelho o que indica que é visível apenas para usuários que estejam logados no sistema.<br><br>
296   -<p class="MsoNormal" style="margin-bottom: 0.0001pt;"><img style="width: 274px; height: 499px;" alt="figura10" src="imagens/AdminCatalogo/figura10.jpg"></p>
297   -<p class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-weight: bold;">Figura 5</span>:
  288 +<div class="imagemExemplo" >
  289 + <img style="width: 274px; height: 499px;" alt="figura10" src="imagens/AdminCatalogo/figura10.jpg"><br>
298 290 Árvore de temas do
299   -catálogo.<br>
300   -</p>
  291 +catálogo.
  292 +</div>
  293 +<br>
  294 +
301 295 <p class="MsoNormal" style="margin-bottom: 0.0001pt;">O
302 296 catálogo
303 297 pode também ser utilizado em aplicativos que utilizam KML
... ...
docs/admin_metadados.html
1 1 <!DOCTYPE html>
2 2 <html><head>
3   -
4   -
5   -
6   -
7 3 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
8 4 <meta charset="UTF-8"><title>Administrando o i3GeoSaude</title>
9 5  
... ... @@ -138,13 +134,12 @@ Censo 2010.&lt;br&gt;
138 134 <br>
139 135 <div class="trail-box">
140 136 <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>
141   -<h1><span style="font-weight: bold;"><a name="1criacao">Criação
  137 +<h1><span style="font-weight: bold;">Criação
142 138 de uma
143 139 variável</span></h1>
144 140 </div>
145 141 <div class="trail-box-content">
146   -<p class="MsoNormal" style="margin-bottom: 0.0001pt;"></p>
147   -<p class="MsoNormal" style="margin-bottom: 0.0001pt;">A
  142 +A
148 143 criação de uma variável pode ocorrer de duas
149 144 formas: usando o assistente (no modo usuário) acionado a
150 145 partir
... ... @@ -154,37 +149,36 @@ utilizando a opção &quot;Metadados
154 149 Estatísticos",
155 150 disponível no módulo de
156 151 administração.<br>
157   -</p>
158   -<p class="MsoNormal" style="margin-bottom: 0.0001pt;">Para utilizar o
  152 +<br>
  153 +Para utilizar o
159 154 modo administrador, abra o item "Metadados Estatísticos", e
160   -escolha "Cadastro principal de variáves", conforme pode ser
161   -visto na Figura 1 (Menu de opções de Metadados
162   -Estatísticos). Para ir direto utilize a url: http://localhost/i3geo/admin/html/estat_variavel.html</p>
163   -<p class="MsoNormal" style="margin-bottom: 0.0001pt;"></p>
  155 +escolha "Cadastro principal de variáves". Para ir direto utilize a url: http://localhost/i3geo/admin/html/estat_variavel.html</p>
  156 +<div class="imagemExemplo" >
164 157 <img src="imagens/admin_menu_metadados.png" style="width: 232px; height: 359px;" alt="Menu Metadados Estatísticos"><br>
165   -<span style="font-weight: bold;">Figura
166   -1: </span>Menu de
  158 +Menu de
167 159 opções do item&nbsp;Metadados
168   -Estatísticos.<br>
  160 +Estatísticos.
  161 +</div>
169 162 <br>
170 163 Em seguida, será apresentada a página contendo as
171   -variáveis cadastradas, conforme pode ser visto na Figura 2.<br>
  164 +variáveis cadastradas.<br>
172 165 <br>
  166 +<div class="imagemExemplo" >
173 167 <img src="imagens/metastat0-criando1VARIAVEL.jpg" style="width: 588px; height: 297px;" alt="Variáveis cadastradas no metadados"><br>
174   -<span style="font-weight: bold;">Figura
175   -2: </span>Variáveis
176   -cadastradas no catálogo de metadados estatísticos.<br>
  168 +Variáveis
  169 +cadastradas no catálogo de metadados estatísticos.
  170 +</div>
177 171 <br>
178 172 Para criar uma variável, basta clicar em "Adicionar
179 173 variável". Crie a variável com nome
180   -"População", como é mostrado na Figura
181   -3.<br>
  174 +"População".<br>
182 175 <br>
  176 +<div class="imagemExemplo" >
183 177 <img src="imagens/metastat0-criando2VARIAVEL.jpg" style="width: 610px; height: 269px;" alt="criação de uma variável"><br>
184   -<span style="font-weight: bold;">Figura
185   -3: </span>Criação
  178 +Criação
186 179 de uma variável no catálogo de metadados
187   -estatísticos.<br>
  180 +estatísticos.
  181 +</div>
188 182 <br>
189 183 </div>
190 184 <div class="trail-box-bottom">
... ... @@ -201,16 +195,17 @@ próximo passo
201 195 é definir
202 196 uma medida à variável. Neste caso, basta clicar
203 197 em
204   -"Adicionar nova medida da variável", como visto na Figura 4.<br>
  198 +"Adicionar nova medida da variável".<br>
205 199 <br>
  200 +<div class="imagemExemplo" >
206 201 <img src="imagens/metastat1-adicionaMedidaVARIAVEL.jpg" style="width: 525px; height: 303px;" alt="adicionando medida da variável"><br>
207   -<span style="font-weight: bold;">Figura
208   -4: </span>Adicionando
209   -uma medida à variável.<br>
  202 +Adicionando
  203 +uma medida à variável.
  204 +</div>
210 205 <br>
211 206 No exemplo, a medida terá os seguintes atributos que devem
212 207 ser
213   -preenchidos na janela vista na Figura 4. Em alguns atributos, os
  208 +preenchidos. Em alguns atributos, os
214 209 valores são obtidos clicando em um ícone de
215 210 listagem (<img src="imagens/iconeListagem.jpg" style="width: 19px; height: 17px;" alt="icone listagem de opções">).<br>
216 211 <div style="margin-left: 40px;">
... ... @@ -236,12 +231,14 @@ registro da tabela com os valores: &lt;span style=&quot;font-weight: bold;&quot;&gt;ibge&lt;/span&gt;&lt;
236 231 Depois de preencher todos os atributos da medida, clique em "Salvar".
237 232 Como resultado, surgirá a página com a
238 233 variável e
239   -a medida adicionadas aos metadados, conforme pode ser visto na Figura 5.<br>
  234 +a medida adicionadas aos metadados.<br>
240 235 <br>
  236 +<div class="imagemExemplo" >
241 237 <img src="imagens/metastat1b-adicionaMedida_RESULT.jpg" style="width: 474px; height: 174px;" alt="Variável e medida adicionadas aos metadados"><br>
242   -<span style="font-weight: bold;">Figura
243   -5: </span>Variável
244   -e medida adicionadas aos metadados.</div>
  238 +Variável
  239 +e medida adicionadas aos metadados.
  240 +</div>
  241 +</div>
245 242 <div class="trail-box-bottom"><img src="files/trails-box-br.png" class="right" alt="" height="6" width="7"> <img src="files/trails-box-bl.png" class="left" alt="" height="6" width="7">
246 243 </div>
247 244 </div>
... ... @@ -256,41 +253,37 @@ que a medida é criada,
256 253 é o momento de definir a forma de
257 254 classificação
258 255 dos valores da variável. Clique em
259   -"Classificações" e escolha um nome. O exemplo
260   -pode ser
261   -visto na Figura 6.<br>
  256 +"Classificações" e escolha um nome.<br>
262 257 <br>
  258 +<div class="imagemExemplo" >
263 259 <img src="imagens/metastat1c-adicionaMedida_CLASSIFIC.jpg" style="width: 494px; height: 177px;" alt="adicionando classificação"><br>
264   -<span style="font-weight: bold;">Figura
265   -6:</span>
266 260 Adicionando uma classificação à medida
267   -da variável.<br>
  261 +da variável.
  262 +</div>
268 263 <br>
269   -Em seguida, clique no ícone "criar classes", conforme
270  
271   -indicado na Figura 7. Essa tarefa permitirá gerar
  264 +Em seguida, clique no ícone "criar classes". Essa tarefa permitirá gerar
272 265 automaticamente os intervalos classificados em faixas de valores e
273 266 cores.<br>
274 267 <br>
  268 +<div class="imagemExemplo" >
275 269 <img src="imagens/metastat1c-adicionaMedida_CLASSIFIC-geraINTERVALO.jpg" style="width: 477px; height: 187px;" alt="gerando classes e valores"><br>
276   -<span style="font-weight: bold;">Figura
277   -7:</span>
278 270 Ícone "criar classes" para geração da
279   -classificação.<br>
  271 +classificação
  272 +</div>
280 273 <br>É apresentada uma janela com as opções para criar as classes.
281 274 Primeiramente, escolha o número de classes a ser criado. Clique no
282 275 botão "Escolher Cores" para a
283 276 definição das cores que
284   -servirão de legenda para as classes da medida. Como visto na
285   -Figura 8, escolhe-se os valores de cores no padrão RGB (red,
  277 +servirão de legenda para as classes da medida. Escolhe-se os valores de cores no padrão RGB (red,
286 278 green, blue), e&nbsp;clicando em "Aplicar cores", o processo
287 279 é
288 280 confirmado.<br>
289 281 <br>
  282 +<div class="imagemExemplo" >
290 283 <img src="imagens/metastat1c-adicionaMedida_CLASSIFIC-geraINTERVALO-CLASSES-CORES.jpg" style="width: 504px; height: 484px;" alt="cores de classificação"><br>
291   -<span style="font-weight: bold;">Figura
292   -8: </span>Definição
293   -das cores das classes.<br>
  284 +Definição
  285 +das cores das classes.
  286 +</div>
294 287 <br>
295 288 Após confirmar as cores das classes, é o momento
296 289 de
... ... @@ -303,14 +296,15 @@ pode ir das dezenas aos milhares), a opção
303 296 escolhida foi
304 297 por "Intervalos iguais". O sistema irá gerar faixas
305 298 de
306   -valores de acordo com o número de classes indicada e com a paleta de cores selecionada, conforme visto na Figura 9. Note que é
  299 +valores de acordo com o número de classes indicada e com a paleta de cores selecionada.
  300 + Note que é
307 301 possível
308 302 editar esses valores e configurar novas faixas.<br>
309 303 <br>
  304 +<div class="imagemExemplo" >
310 305 <img src="imagens/metastat1c-adicionaMedida_CLASSIFIC-geraINTERVALO-CLASSES-INT_IGUAIS.jpg" style="width: 605px; height: 449px;" alt="geração de intervalos iguais"><br>
311   -<span style="font-weight: bold;">Figura
312   -9:</span>
313   -Geração dos intervalos de valores iguais.<br>
  306 +Geração dos intervalos de valores iguais.
  307 +</div>
314 308 </div>
315 309 <div class="trail-box-bottom">
316 310 <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>
... ... @@ -332,33 +326,32 @@ cartograma
332 326 estatístico, em seguida adicione com camada ao mapa do
333 327 i3GeoSaúde. Essas tarefas podem ser vistas na
334 328 seguência de
335   -imagens das Figura 10, 11, 12 e 13.<br>
  329 +imagens abaixo.<br>
336 330 <br>
  331 +<div class="imagemExemplo" >
337 332 <img src="imagens/menu_ferramenta_cartograma.jpg" style="width: 514px; height: 505px;" alt="opção ferramentas - cartograma"> <br>
338   -<span style="font-weight: bold;">Figura
339   -10:</span>
340 333 Opção para visualizar os cartogramas
341   -estatísticos.<br>
  334 +estatísticos.
  335 +</div>
342 336 <br>
  337 +<div class="imagemExemplo" >
343 338 <img src="imagens/cartograma_variavel_prop_camada.jpg" style="width: 428px; height: 360px;" alt="camada">
344 339 &nbsp;<br>
345   -<span style="font-weight: bold;">Figura
346   -11:</span>
347 340 Escolha da variável e medida, com destaque para o
348   -ícone de propriedades da camada.<br>
349   -<br>
  341 +ícone de propriedades da camada.
  342 +</div>
350 343 <br>
  344 +<div class="imagemExemplo" >
351 345 <img src="imagens/cartograma_variavel_prop_camada-2.jpg" style="width: 576px; height: 412px;" alt="propriedades camada"> <br>
352   -<span style="font-weight: bold;">Figura
353   -12:</span>
354 346 Propriedades da medida para
355   -representação&nbsp;das classes na camada.<br>
  347 +representação&nbsp;das classes na camada.
  348 +</div>
356 349 <br>
  350 +<div class="imagemExemplo" >
357 351 <img src="imagens/cartograma_variavel_prop_camada-3.jpg" style="width: 618px; height: 374px;" alt="visualização do mapa na camada adicionada"><br>
358   -<span style="font-weight: bold;">Figura
359   -13: </span>Visualização
360   -da variável adicionada como camada ao mapa.<br>
361   -<br>
  352 +Visualização
  353 +da variável adicionada como camada ao mapa.
  354 +</div>
362 355 <br>
363 356 </div>
364 357 <div class="trail-box-bottom">
... ...
docs/exemploInfluenza.html
1 1 <!DOCTYPE html>
2 2 <html lang="pt-br"><head>
3   -
4   -
5   -
6 3 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
7 4 <meta charset="UTF-8"><title>i3GeoSaude</title>
8 5  
... ... @@ -43,17 +40,15 @@ Variável&lt;/a&gt;&quot;.&lt;br&gt;
43 40 <br>
44 41 Como trata-se de uma nova variável, clique no
45 42 botão "<span style="font-weight: bold;">ou crie uma nova</span>"
46   -(ver <span style="font-weight: bold;">Figura
47   -1</span>: criando a
48   -variável).<br>
49 43 <br>
  44 +<br>
  45 +<div class="imagemExemplo" >
50 46 <img style="width: 312px; height: 196px;" alt="6" src="imagens/exemplo1/img06.jpg"><br>
51   -<span style="font-weight: bold;">Figura
52   -1</span>: Criando a
53   -Variável.<br>
  47 +Criando a
  48 +Variável.
  49 +</div>
54 50 <br>
55   -Abre-se uma&nbsp;janela (vista na <span style="font-weight: bold;">Figura
56   -2</span>),
  51 +Abre-se uma&nbsp;janela
57 52 onde iremos definir um nome para nossa
58 53 variável.&nbsp;Neste
59 54 exemplo, iremos utilizar uma simulação de casos
... ... @@ -69,40 +64,38 @@ pois é
69 64 opcional.
70 65 Terminado, clique no botão "Salva".<br>
71 66 <br>
  67 +<div class="imagemExemplo" >
72 68 <img style="width: 454px; height: 253px;" alt="7" src="imagens/exemplo1/img07.jpg"><br>
73   -<span style="font-weight: bold;">Figura
74   -2</span>: Salvando nova
75   -variável.<br>
  69 +Salvando nova
  70 +variável.
  71 +</div>
76 72 <br>
77 73 Uma vez salvo, sua variável já esta criada e deve
78 74 estar
79 75 disponível para seleção. &nbsp;<br>
80 76 <br>
81   -Selecione sua variável e clique no botão <img style="width: 30px; height: 22px;" alt="b" src="imagens/exemplo1/untitled.JPG"> (<span style="font-weight: bold;">Figura
82   -3</span>)
83   -para darmos
  77 +Selecione sua variável e clique no botão <img style="width: 30px; height: 22px;" alt="b" src="imagens/exemplo1/untitled.JPG">
  78 + para darmos
84 79 continuidade e criar uma medida para nossa variável.<br>
85 80 <br>
  81 +<div class="imagemExemplo" >
86 82 <img style="width: 312px; height: 195px;" alt="8" src="imagens/exemplo1/img08.jpg"><br>
87   -<span style="font-weight: bold;">Figura
88   -3</span>: Selecionando uma
89   -variável.&nbsp;<br>
  83 +Selecionando uma
  84 +variável.&nbsp;
  85 +</div>
90 86 <br>
91 87 Nesta janela, note que nossa variável ainda não
92 88 possui
93 89 medida. Então, clique no botão "<span style="font-weight: bold;">ou crie uma nova</span>"
94   -(vista na <span style="font-weight: bold;">Figura
95   -4:</span> Criando
96   -nova
97   -medida).<br>
98 90 <br>
  91 +<br>
  92 +<div class="imagemExemplo" >
99 93 <img style="width: 311px; height: 195px;" alt="9" src="imagens/exemplo1/img09.jpg"><br>
100   -<span style="font-weight: bold;">Figura
101   -4</span>: Criando nova medida para a
102   -variável.<br>
  94 +Criando nova medida para a
  95 +variável.
  96 +</div>
103 97 <br>
104   -Em seguida, surgirá uma nova janela (ver <span style="font-weight: bold;">Figura 5:</span>
105   -Editor de medidas). Nesta
  98 +Em seguida, surgirá uma nova janela. Nesta
106 99 janela, iremos definir os atributos da medida da variável,
107 100 que
108 101 permitirão configurar a visualização
... ... @@ -113,7 +106,7 @@ com os dados já esteja disponível no banco de
113 106 dados do
114 107 i3GeoSaúde (veja o tutorial sobre "<a target="_blank" href="criacao_banco_dados-variavel.html">Como
115 108 criar o
116   -banco de dados</a>."), marque a opção "<span style="font-weight: bold;">Quero usar uma tabela já existente ou alterar os parâmetros adicionais"</span>. Se a mesma ainda não estiver no banco, na próxima tela (<span style="font-weight: bold;">Figura 12</span>)
  109 +banco de dados</a>."), marque a opção "<span style="font-weight: bold;">Quero usar uma tabela já existente ou alterar os parâmetros adicionais"</span>. Se a mesma ainda não estiver no banco, na próxima tela
117 110 há uma opção para fazer o upload da mesma no formato ".CSV". Prossiga o
118 111 processo deixando as configurações de tabela com os valores padrões,
119 112 faça o upload da tabela e retorne para o assistente de criação de
... ... @@ -143,32 +136,35 @@ exemplo estão
143 136 georeferenciadas em nível de bairro)</li>
144 137 </ul>
145 138 <br>
  139 +<div class="imagemExemplo" >
146 140 <img style="width: 462px; height: 251px;" alt="10" src="imagens/exemplo1/img10.jpg"><br>
147   -<span style="font-weight: bold;">Figura
148   -5</span>: Editor de medidas da
149   -variável.<br>
  141 +Editor de medidas da
  142 +variável.
  143 +</div>
150 144 <br>
151 145 <ul>
152 146 <li><span style="font-weight: bold;">Conexão</span>:
153 147 para a conexão ao banco de dados escolha "i3geosaude"
154 148 (conexão
155   -padrão, vista na <span style="font-weight: bold;">Figura 6</span>).</li>
  149 +padrão).</li>
156 150 </ul>
157 151 <br>
  152 +<div class="imagemExemplo" >
158 153 <img style="width: 295px; height: 115px;" alt="11" src="imagens/exemplo1/img11.jpg"><br>
159   -<span style="font-weight: bold;">Figura
160   -6</span>: Selecionando&nbsp;a
161   -conexão.<br>
  154 +Selecionando&nbsp;a
  155 +conexão.
  156 +</div>
162 157 <br>
163 158 <ul>
164 159 <li><span style="font-weight: bold;">Esquema do banco</span>:
165   -a tabela encontra-se no esquema "i3geo_metaest" (veja a <span style="font-weight: bold;">Figura 7</span>)</li>
  160 +a tabela encontra-se no esquema "i3geo_metaest"</li>
166 161 </ul>
167 162 <br>
  163 +<div class="imagemExemplo" >
168 164 <img style="width: 271px; height: 140px;" alt="12" src="imagens/exemplo1/img12.jpg"><br>
169   -<span style="font-weight: bold;">Figura
170   -7</span>: Selecionando esquema do
171   -banco.<br>
  165 +Selecionando esquema do
  166 +banco.
  167 +</div>
172 168 <br>
173 169 <ul>
174 170 <li><span style="font-weight: bold;">Tabela do Banco</span>:
... ... @@ -176,21 +172,23 @@ voce deve escolher a tabela a qual possui os dados para a medida, no
176 172 exemplo, a tabela chama-se "influenza".</li>
177 173 </ul>
178 174 <br>
  175 +<div class="imagemExemplo" >
179 176 <img style="width: 213px; height: 133px;" alt="13" src="imagens/exemplo1/img13.jpg"><br>
180   -<span style="font-weight: bold;">Figura
181   -8</span>: Selecionando tabela.<br>
  177 +Selecionando tabela.
  178 +</div>
182 179 <br>
183 180 <ul>
184 181 <li><span style="font-weight: bold;">Coluna de
185 182 ligação com a tabela GEO</span>:
186 183 Escolhemos a coluna
187 184 da tabela que possui os códigos das regiões,
188   -neste caso "codigoregiao" (como visto na Figura 9).</li>
  185 +neste caso "codigoregiao".</li>
189 186 </ul>
  187 +<div class="imagemExemplo" >
190 188 <img style="width: 242px; height: 181px;" alt="14" src="imagens/exemplo1/img14.jpg"><br>
191   -<span style="font-weight: bold;">Figura
192   -9</span>: Selecionando coluna
193   -dos códigos das regiões.<br>
  189 +Selecionando coluna
  190 +dos códigos das regiões.
  191 +</div>
194 192 <br>
195 193 <ul>
196 194 <li> <span style="font-weight: bold;">Coluna com valores</span>:
... ... @@ -198,70 +196,78 @@ Coluna
198 196 que possui os valores da medida da variável, para
199 197 cada&nbsp;região (bairro). Neste exemplo, o valor
200 198 está na
201   -coluna chamada "num_casos", como visto na <span style="font-weight: bold;">Figura 10</span>.</li>
  199 +coluna chamada "num_casos".</li>
202 200 </ul>
  201 +<div class="imagemExemplo" >
203 202 <img style="width: 221px; height: 186px;" alt="15" src="imagens/exemplo1/img15.jpg"><br>
204   -<span style="font-weight: bold;">Figura
205   -10</span>: Selecionando a coluna
206   -com os valores da medida.<br>
  203 +Selecionando a coluna
  204 +com os valores da medida.
  205 +</div>
207 206 <br>
208 207 <ul>
209 208 <li><span style="font-weight: bold;">Coluna com os IDs</span>:
210   -selecionamos aqui a coluna "gid" (veja <span style="font-weight: bold;">Figura
211   -11</span>),
  209 +selecionamos aqui a coluna "gid",
212 210 que é a coluna padrão com os valores de
213 211 identificação (os chamados "id") dos
214 212 dados.&nbsp;</li>
215 213 </ul>
216 214 <br>
  215 +<div class="imagemExemplo" >
217 216 <img style="width: 218px; height: 199px;" alt="16" src="imagens/exemplo1/img16.jpg"><br>
218   -<span style="font-weight: bold;">Figura
219   -11</span>: Selecionando a coluna
220   -"gid". <br>
  217 +Selecionando a coluna
  218 +"gid"
  219 +</div>
221 220 <br>
222 221 Após a configuração de nossa medida,
223 222 para salvar
224 223 basta que clique no botão "Salva" que está
225   -localizado no topo da janela, como foi&nbsp;visto na <span style="font-weight: bold;">Figura
226   -5</span>. Em seguida, o sistema
  224 +localizado no topo da janela. Em seguida, o sistema
227 225 i3GeoSaúde reapresenta a janela do assistente para
228 226 edição e criação
229   -de&nbsp;''medida da variável" (vista na <span style="font-weight: bold;">Figura 4</span>).
  227 +de&nbsp;''medida da variável".
230 228 Assim, prossiga o processo clicando&nbsp;no
231   -botão <img style="width: 30px; height: 22px;" alt="b" src="imagens/exemplo1/untitled.JPG"> para o upload de CSV (veja essa janela na <span style="font-weight: bold;">Figura 12</span>).<br>
  229 +botão <img style="width: 30px; height: 22px;" alt="b" src="imagens/exemplo1/untitled.JPG"> para o upload de CSV.<br>
232 230 <br>
233 231 Caso a
234 232 tabela
235 233 com os dados ainda não esteja disponível no banco de
236 234 dados do
237   -i3GeoSaúde, é possível fazer o upload da mesma clicando no botão "Upload CSV" visto no <span style="font-weight: bold;">Figura 12</span>. Se a tabela já existir no banco, ignore esta etapa e prossiga o processo clicando&nbsp;no
  235 +i3GeoSaúde, é possível fazer o upload da mesma clicando no botão "Upload CSV". Se a tabela já existir no banco, ignore esta etapa e prossiga o processo clicando&nbsp;no
238 236 botão <img style="width: 30px; height: 22px;" alt="b" src="imagens/exemplo1/untitled.JPG">.<br>
239 237 <br>
  238 +<div class="imagemExemplo" >
240 239 <img style="width: 403px; height: 369px;" alt="" src="imagens/exemplo1/img19.jpg"><br>
241   -<span style="font-weight: bold;">Figura 12: </span>Upload de CSV.<br>
  240 +Upload de CSV.
  241 +</div>
242 242 <br>
243 243 Na janela de upload de CSV, escolha a variável e a medida de variável a
244 244 qual os dados inseridos pertencem, selecione o arquivo .csv e envie. Em
245 245 seguida, cadastre as definições de sua tabela nos campos, de acordo com
246 246 as indicações do item 2 do tutorial <a href="http://localhost/docs/admin_metadados.html">Metadados estatísticos (como criar uma variável)</a>.<br>
247 247 <br>
  248 +<div class="imagemExemplo" >
248 249 <img style="width: 503px; height: 497px;" alt="" src="imagens/exemplo1/img20.jpg"><br>
249   -<span style="font-weight: bold;">Figura 13: </span>Cadastro de medida variável<br>
  250 +Cadastro de medida variável
  251 +</div>
250 252 <br>
251   -Ao terminar o cadastro dos dados, clique em "Concluir envio". Se aparecer uma mensagem semelhante à da <span style="font-weight: bold;">Figura 14 </span>o envio do CSV foi feito corretamente. Feche a janela de upload e clique no botão <img style="width: 30px; height: 22px;" alt="b" src="imagens/exemplo1/untitled.JPG"> para prosseguir para a criação de classes para a medida variável.<br>
  253 +Ao terminar o cadastro dos dados, clique em "Concluir envio".
  254 +Se aparecer uma mensagem semelhante à da <span style="font-weight: bold;">Figura abaixo </span>o envio do CSV foi feito corretamente. Feche a janela de upload e clique no botão <img style="width: 30px; height: 22px;" alt="b" src="imagens/exemplo1/untitled.JPG"> para prosseguir para a criação de classes para a medida variável.<br>
252 255 <br>
  256 +<div class="imagemExemplo" >
253 257 <img style="width: 276px; height: 162px;" alt="" src="imagens/exemplo1/img21.jpg"><br>
254   -<span style="font-weight: bold;">Figura 14: </span>Mensagem de conclusão do envio do CSV.<br>
  258 +Mensagem de conclusão do envio do CSV.
  259 +</div>
255 260 <br>
256   -Na janela vista na <span style="font-weight: bold;">Figura 15</span>,
  261 +Na janela vista na figura abaixo,
257 262 clique no botão "<span style="font-weight: bold;">ou crie uma
258 263 nova</span>''
259 264 para criar uma nova classificação.<br>
260 265 <br>
  266 +<div class="imagemExemplo" >
261 267 <img style="width: 383px; height: 286px;" alt="17" src="imagens/exemplo1/img17.jpg"><br>
262   -<span style="font-weight: bold;">Figura
263   -15</span>: Criando
264   -classificação.<br>
  268 +Criando
  269 +classificação.
  270 +</div>
265 271 <br>
266 272 Agora, é apresentada a janela que corresponde à
267 273 última
... ... @@ -269,24 +275,26 @@ etapa de configuração da nossa
269 275 variável,
270 276 responsável pela geração dos
271 277 intervalos de valores
272   -para representação das legendas coloridas (veja <span style="font-weight: bold;">Figura 13</span>).<br>
  278 +para representação das legendas coloridas.<br>
273 279 <br>
  280 +<div class="imagemExemplo" >
274 281 <img style="width: 410px; height: 335px;" alt="n" src="imagens/usuario/usuario21.jpg"><br>
275   -<span style="font-weight: bold;">Figura 16</span>:
276 282 Definindo cores e
277   -intervalos.<br>
  283 +intervalos.
  284 +</div>
278 285 <br>
279 286 Primeiro, escolhemos um conjunto de cores para nosso
280   -intervalo.&nbsp;Definidas as cores (conforme visto na <span style="font-weight: bold;">Figura 17</span>),
  287 +intervalo.&nbsp;Definidas as cores,
281 288 clique no botão "Aplicar cores".<br>
282 289 <br>
  290 +<div class="imagemExemplo" >
283 291 <img style="width: 285px; height: 432px;" alt="18" src="imagens/exemplo1/img18.jpg"><br>
284   -<span style="font-weight: bold;">Figura
285   -17</span>: Selecionando cores.<br>
  292 +Selecionando cores.
  293 +</div>
286 294 <br>
287 295 Após selecionar as cores, basta clicar em no
288 296 botão "5
289   -intervalos iguais" (veja a <span style="font-weight: bold;">Figura 16</span>)
  297 +intervalos iguais"
290 298 para finalizar a criação
291 299 desta variável.
292 300 </div>
... ... @@ -306,46 +314,46 @@ Para visualizar a variável e a medida na forma de
306 314 cartograma,
307 315 entre na tela de mapas, escolha no menu suspenso&nbsp;
308 316 "Ferramentas" o
309   -ítem "Cartogramas estatísticos", conforme visto
310   -na <span style="font-weight: bold;">Figura
311   -18.</span><br>
  317 +ítem "Cartogramas estatísticos".<br>
312 318 <br>
313   -&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
314   -&nbsp;&nbsp; &nbsp; &nbsp; <img style="width: 251px; height: 512px;" alt="figura 1" src="imagens/digitarDados/fig2.jpg"><br>
315   -&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
316   -&nbsp; &nbsp;&nbsp; <span style="font-weight: bold;">Figura 18</span>:
317   -&nbsp;Menu ferramentas da tela de mapas.<br>
  319 +<div class="imagemExemplo" >
  320 +<img style="width: 251px; height: 512px;" alt="figura 1" src="imagens/digitarDados/fig2.jpg"><br>
  321 +Menu ferramentas da tela de mapas.
  322 +</div>
318 323 <br>
319 324 Em seguida, surge a janela onde devemos selecionar a
320 325 variável
321   -que será visualizada no cartograma. Na <span style="font-weight: bold;">Figura 19</span>, escolha a
  326 +que será visualizada no cartograma. Escolha a
322 327 variável do exemplo, chamada "Influenza".<br>
323 328 <br>
  329 +<div class="imagemExemplo" >
324 330 <img style="width: 256px; height: 248px;" alt="figura02" src="imagens/exemplo1/figura02.jpg"><br>
325   -&nbsp;&nbsp; <span style="font-weight: bold;">Figura 19</span>:
326   -&nbsp;Escolhendo a variável.<br>
  331 +Escolhendo a variável.
  332 +</div>
327 333 <br>
328 334 Depois, selecione a medida da&nbsp;
329 335 variável, indicando a abrangência que
330 336 será
331 337 analisada no mapa, em "Escolha uma medida da variável" a
332   -opção "Influenza por bairro" (veja <span style="font-weight: bold;">Figura 20</span>).
  338 +opção "Influenza por bairro".
333 339 <br>
334 340 <br>
  341 +<div class="imagemExemplo" >
335 342 <img style="width: 260px; height: 292px;" alt="figura002" src="imagens/exemplo1/figura002.jpg"><br>
336   -<span style="font-weight: bold;">Figura 20</span>: &nbsp;Escolhendo a
337   -medida da variável.<br>
  343 +Escolhendo a
  344 +medida da variável.
  345 +</div>
338 346 <br>
339 347 No exempo elaborado neste tutoral, usamos um parâmetro de
340   -tempo definido por "<span style="font-weight: bold;">Ano"</span>
341   -(como visto na <span style="font-weight: bold;">Figura 21</span>),
  348 +tempo definido por "<span style="font-weight: bold;">Ano"</span>,
342 349 e o valor exibido serão os anos de ocorrência do
343 350 fenômeno na tabela de dados da variável. <br>
344 351 <br>
  352 +<div class="imagemExemplo" >
345 353 <img style="width: 254px; height: 283px;" alt="figura0002" src="imagens/exemplo1/figura0002.jpg"><br>
346   -<span style="font-weight: bold;">Figura
347   -21</span>: &nbsp;Escolhendo o
348   -parâmetro por "Ano"<br>
  354 +Escolhendo o
  355 +parâmetro por "Ano"
  356 +</div>
349 357 <br>
350 358 Finalmente, clique em "Adicionar
351 359 camada ao mapa" (para adicionar outros períodos basta
... ... @@ -358,15 +366,12 @@ parâmetro definido pelo usuário.&lt;br&gt;
358 366 Lembre que o cartograma é adicionado como um nova camada (de
359 367 tema), entre as outras camadas já existentes. Todas essas
360 368 camadas podem ser vistas a partir da visibilidade da guia lateral do
361   -i3GeoSaúde, marcando&nbsp;ou desmarcando&nbsp;um tema,
362   -como
363   -demonstrado na <span style="font-weight: bold;">Figura 22</span>.<br>
  369 +i3GeoSaúde, marcando&nbsp;ou desmarcando&nbsp;um tema.<br>
364 370 <br>
365   -&nbsp;&nbsp;&nbsp; <img src="imagens/exemplo1/figura3.jpg" alt="figura *" style="width: 315px; height: 350px;"><br>
366   -&nbsp;&nbsp;&nbsp; <span style="font-weight: bold;">Figura 22</span>:
  371 +<div class="imagemExemplo" >
  372 +<img src="imagens/exemplo1/figura3.jpg" alt="figura *" style="width: 315px; height: 350px;"><br>
367 373 Guia lateral de camadas de temas.
368   -<br>
369   -
  374 +</div>
370 375 </div>
371 376 <div class="trail-box-bottom">
372 377 <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>
... ... @@ -389,13 +394,13 @@ evolução de&amp;nbsp;eventos. Para isso, navegue
389 394 no menu
390 395 suspenso
391 396 "Ferramentas", &nbsp;e escolha a opção
392   -"Animação", conforme é visto na Figura
393   -4.<br>
  397 +"Animação".<br>
394 398 <br>
395   -&nbsp;&nbsp;&nbsp; <img style="width: 245px; height: 200px;" alt="figura 12" src="imagens/exemplo1/figura4.jpg"><br>
396   -&nbsp;&nbsp;&nbsp; <span style="font-weight: bold;">Figura 23</span>:
  399 +<div class="imagemExemplo" >
  400 +<img style="width: 245px; height: 200px;" alt="figura 12" src="imagens/exemplo1/figura4.jpg"><br>
397 401 Menu "Ferramentas", opção
398   -"Animação".<br>
  402 +"Animação".
  403 +</div>
399 404 <br>
400 405 Após clicar no ítem
401 406 "Animação", o
... ... @@ -405,29 +410,28 @@ onde será escolhido os
405 410 temas que&nbsp;farão parte da
406 411 animação. Confirme o
407 412 processo de animação clicando no botão
408   -"Iniciar"
409   -(identificado na <span style="font-weight: bold;">Figura 24</span>
410   -pelo apontador).<br>
  413 +"Iniciar".<br>
411 414 <br>
412   -&nbsp;&nbsp;&nbsp; <img style="width: 189px; height: 151px;" alt="figura 5" src="imagens/exemplo1/figura5.jpg"><br>
413   -&nbsp;&nbsp;&nbsp; <span style="font-weight: bold;">Figura 24:</span>
414   -Janela&nbsp;Animação.<br>
  415 +<div class="imagemExemplo" >
  416 +<img style="width: 189px; height: 151px;" alt="figura 5" src="imagens/exemplo1/figura5.jpg"><br>
  417 +Janela Animação.
  418 +</div>
415 419 <br>
416 420 Uma vez iniciada a animação ocorrerá
417 421 um efeito de
418 422 alternância
419 423 entre os valores dos parâmetros, para o exemplo em
420   -questão, os valores entre "2005" e "2010", conforme
421  
422   -visto na <span style="font-weight: bold;">Figura 25</span> (1) e (2), respectivamente.<br>
423   -<br>
424   -&nbsp;&nbsp;&nbsp; <img style="width: 604px; height: 591px;" alt="figura 7" src="imagens/exemplo1/figura6.jpg"> &nbsp;
425   -&nbsp;&nbsp;
426   -&nbsp; &nbsp; &nbsp; &nbsp; <br>
427   -&nbsp;&nbsp;&nbsp; <img style="width: 604px; height: 590px;" alt="figura7" src="imagens/exemplo1/figura7.jpg"><br>
428   -&nbsp; &nbsp;&nbsp; <span style="font-weight: bold;">Figura 25</span>:
  424 +questão, os valores entre "2005" e "2010".<br>
  425 +<br>
  426 +<div class="imagemExemplo" >
  427 +<img style="width: 604px; height: 591px;" alt="figura 7" src="imagens/exemplo1/figura6.jpg"><br>
  428 +</div>
  429 +<br>
  430 +<div class="imagemExemplo" >
  431 +<img style="width: 604px; height: 590px;" alt="figura7" src="imagens/exemplo1/figura7.jpg"><br>
429 432 Tema com referência a "2005" (1);
430   -Tema com referência a "2010" (2).<br>
  433 +Tema com referência a "2010" (2).
  434 +</div>
431 435 </div>
432 436 <div class="trail-box-bottom">
433 437 <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>
... ... @@ -438,4 +442,4 @@ Tema com referência a &quot;2010&quot; (2).&lt;br&gt;
438 442 </div>
439 443 </div>
440 444 </div>
441   -</body></html>
442 445 \ No newline at end of file
  446 +</body></html>
... ...
docs/exemplo_hipertensao.html
1 1 <!DOCTYPE html>
2 2 <html><head>
3   -
4   -
5 3 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
6 4 <meta charset="UTF-8"><title>Administrando o i3GeoSaude</title>
7 5  
... ... @@ -39,24 +37,25 @@ foram previamente criados no i3GeoSaúde.&lt;br&gt;
39 37 </div>
40 38 <div class="trail-box-content">No
41 39 menu "Ferramentas" selecione a
42   -opção "Cartogramas estatísticos" (<span style="font-weight: bold;">Figura 1</span>).<br>
  40 +opção "Cartogramas estatísticos".<br>
43 41 <br>
  42 +<div class="imagemExemplo" >
44 43 <img style="width: 251px; height: 512px;" alt="figura 1" src="imagens/digitarDados/fig2.jpg"><br>
45   -<span style="font-weight: bold;">Figura
46   -1: </span>Menu ferramentas -
47   -Cartogramas estatísticos.<br>
  44 +Menu ferramentas -
  45 +Cartogramas estatísticos.
  46 +</div>
48 47 <br>
49 48 Em seguida, será apresentada uma janela onde você deve
50 49 escolher a
51 50 variável definida no i3GeoSaúde. No exemplo visto
52   -na <span style="font-weight: bold;">Figura
53   -2</span>, a variável
  51 +na figura abaixo, a variável
54 52 chama-se "Casos_Doentes".<br>
55 53 <br>
  54 +<div class="imagemExemplo" >
56 55 <img style="width: 284px; height: 335px;" alt="figura 2" src="imagens/exemplo_hipertensao/ScreenHunter_05%20Mar.%2008%2008.36.jpg"><br>
57   -<span style="font-weight: bold;">Figura
58   -2: </span>Caixa de
59   -seleção de variáveis.<br>
  56 +Caixa de
  57 +seleção de variáveis.
  58 +</div>
60 59 <br>
61 60 Após selecionar a variável e cicar em "Adicionar
62 61 camada
... ... @@ -64,21 +63,21 @@ ao mapa&quot;,&amp;nbsp; é importante que você clique
64 63 no
65 64 ícone denomindado "Análise", localizado
66 65 na&nbsp; parte
67   -superior direito da janela vista na <span style="font-weight: bold;">Figura
68   -2</span>.
69   -Através da ferramenta "Análise" (vista na <span style="font-weight: bold;">Figura 3</span>),
  66 +superior direito da janela vista na figura abaixo.
  67 +
  68 +Através da ferramenta "Análise",
70 69 será possível&nbsp;filtrar os
71 70 dados,&nbsp;&nbsp;escolhendo o primeiro botão da
72 71 janela ("Focar
73 72 o mapa em um determinado limite geográfico").
74 73 &nbsp;Escolha
75 74 a&nbsp; sequência para os limites: <span style="font-weight: bold;">Estado-&gt;município-&gt;bairro</span>
76   -.(Figura
77   -3)<br>
  75 +.<br>
78 76 <br>
  77 +<div class="imagemExemplo" >
79 78 <img style="width: 270px; height: 222px;" alt="figura 6" src="imagens/exemplo_hipertensao/ScreenHunter_11%20Mar.%2008%2008.58.jpg"><br>
80   -<span style="font-weight: bold;">Figura
81   -3: </span>Ferramentas de<span style="font-weight: bold;"> </span>Análise.<br>
  79 +Análise.
  80 +</div>
82 81 <br>
83 82 O próximo passo é determinar a forma de
84 83 visualizar o cartograma com os dados da variável.<br>
... ... @@ -93,27 +92,27 @@ visualizar o cartograma com os dados da variável.&lt;br&gt;
93 92 <h1><span style="font-weight: bold;"><a name="2medida_variável"></a>Formas de visualização&nbsp;</span></h1>
94 93 </div>
95 94 <div class="trail-box-content">Os
96   -cartogramas podem ser visualizadas pelas ferramentas: OpenLayers
97   -(<span style="font-weight: bold;">Figura
98   -4</span>), Google Maps (<span style="font-weight: bold;">Figura 5</span>)
99   -e Google Earth (<span style="font-weight: bold;">Figura 6</span>).<br>
  95 +cartogramas podem ser visualizadas pelas ferramentas: OpenLayers,
  96 +Google Maps
  97 +e Google Earth.<br>
100 98 <br>
  99 +<div class="imagemExemplo" >
101 100 <img style="width: 361px; height: 468px;" alt="Figura 4" src="imagens/exemplo_hipertensao/ScreenHunter_13%20Mar.%2008%2009.28.jpg"><br>
102   -<span style="font-weight: bold;">Figura
103   -4: </span>Visualização
104   -com o OpenLayers.<br>
105   -<br>
  101 +Visualização
  102 +com o OpenLayers.
  103 +</div>
106 104 <br>
  105 +<div class="imagemExemplo" >
107 106 <img style="width: 357px; height: 408px;" alt="Figura 5" src="imagens/exemplo_hipertensao/ScreenHunter_14%20Mar.%2008%2009.30.jpg"><br>
108   -<span style="font-weight: bold;">Figura
109   -5: </span>Visualização
110   -com&nbsp; Google Maps.<br>
111   -<br>
  107 +Visualização
  108 +com&nbsp; Google Maps.
  109 +</div>
112 110 <br>
  111 +<div class="imagemExemplo" >
113 112 <img style="width: 380px; height: 249px;" alt="figura 6" src="imagens/exemplo_hipertensao/ScreenHunter_12%20Mar.%2008%2009.23.jpg"><br>
114   -<span style="font-weight: bold;">Figura
115   -6</span>:
116   -Visualização usando o Google Earth.</div>
  113 +Visualização usando o Google Earth.
  114 +</div>
  115 +</div>
117 116 <div class="trail-box-bottom"><img src="files/trails-box-br.png" class="right" alt="" height="6" width="7"> <img src="files/trails-box-bl.png" class="left" alt="" height="6" width="7">
118 117 </div>
119 118 </div>
... ... @@ -123,4 +122,4 @@ Visualização usando o Google Earth.&lt;/div&gt;
123 122 </div>
124 123 </div>
125 124 </div>
126   -</body></html>
127 125 \ No newline at end of file
  126 +</body></html>
... ...
docs/files/estilos.css
1 1 /* -------- Estilos -----------*/
  2 +.imagemExemplo{
  3 + text-align: center;
  4 + color: gray;
  5 +}
2 6  
3 7 body {
4 8 background-size: cover;
... ...
docs/instalacao.html
... ... @@ -158,7 +158,7 @@ automaticamente, abra a pasta raiz da unidade USB e execute o arquivo
158 158 mouse
159 159 sobre o arquivo, escolha "Executar como&nbsp;Administrador".<br>
160 160 <br>
161   -<div style=text-align:center; >
  161 +<div class="imagemExemplo" >
162 162 <img style="width: 547px; height: 404px;" alt="tela da m&aacute;quina virtual"
163 163 src="imagens/telamaquinavirtual.png"><br>
164 164 Tela de abertura do software da m&aacute;quina virtual,
... ...
docs/live.html
... ... @@ -66,13 +66,13 @@ será feita no Windows.&lt;br&gt;
66 66 e instale-o.<br>
67 67 <br>
68 68 2. Abra o LILI.<br><br>
69   -<div style=text-align:center; ><img style="width: 244px; height: 400px;" alt="lili" src="imagens/live/Lili.png"></div><br>
  69 +<div class="imagemExemplo" ><img style="width: 244px; height: 400px;" alt="lili" src="imagens/live/Lili.png"></div><br>
70 70  
71 71 3. Escolha um pendrive:<br><br>
72   -<div style=text-align:center; ><img style="width: 366px; height: 99px;" alt="lil-pen" src="imagens/live/Lili-pendrive.png"></div>
  72 +<div class="imagemExemplo" ><img style="width: 366px; height: 99px;" alt="lil-pen" src="imagens/live/Lili-pendrive.png"></div>
73 73 <br>
74 74 4. Escolha o arquivo .iso, no nosso caso i3geosaude.iso<br><br>
75   -<div style=text-align:center; ><img style="width: 368px; height: 136px;" alt="fonte" src="imagens/live/Lili-fonte.png"></div>
  75 +<div class="imagemExemplo" ><img style="width: 368px; height: 136px;" alt="fonte" src="imagens/live/Lili-fonte.png"></div>
76 76 <br>
77 77 5. Escolha o tamanho da persistência. Caso seja utilizado em uma
78 78 máquina virtual é necessário ter um
... ... @@ -80,20 +80,20 @@ arquivo de
80 80 persistência para que as alterações
81 81 feitas durante
82 82 a execução dos programas sejam gravadas.<br><br>
83   -<div style=text-align:center; ><img style="width: 368px; height: 113px;" alt="persistencia" src="imagens/live/Lili-persistencia.png"></div><br>
  83 +<div class="imagemExemplo" ><img style="width: 368px; height: 113px;" alt="persistencia" src="imagens/live/Lili-persistencia.png"></div><br>
84 84 <br>
85 85 6. Marque todas as opções. A última
86 86 opção instalará dentro do pendrive uma
87 87 máquina virtual que possibilitará testar o
88 88 i3GeoSaúde de dentro do Windows.<br><br>
89   -<div style=text-align:center; >
  89 +<div class="imagemExemplo" >
90 90 <img style="width: 368px; height: 115px;" alt="opção" src="imagens/live/Lili-opcao.png"></div><br>
91 91 Caso você queira utilizar o pendrive para ligar o computador inicializando o Xubuntu diretamente, fora da máquina virtual, deixe a terceira opção desmarcada.<br>
92 92 <br>
93 93 7. Clique no raio para começar o processo de
94 94 criação do pendrive inicializável. Este processo
95 95 levará alguns minutos. <br><br>
96   -<div style=text-align:center; >
  96 +<div class="imagemExemplo" >
97 97 <img style="width: 368px; height: 115px;" alt="instalação" src="imagens/live/Lili-instal.png"></div>
98 98 <br>
99 99 <b style="font-weight: normal;" id="docs-internal-guid-3b843861-b39a-c7fe-dd67-a5954774fa55">
... ... @@ -128,7 +128,7 @@ isso.&lt;br&gt;
128 128 1. Pelo Windows Explorer, acesse o pendrive, entre na pasta
129 129 VirtualBox e execute o arquivo VirtualBox.exe. Clique na
130 130 opção Settings.<br><br>
131   -<div style=text-align:center; >
  131 +<div class="imagemExemplo" >
132 132 <img style="width: 361px; height: 145px;" alt="virtbox 0" src="imagens/live/vbox0.png"></div>
133 133 <br>
134 134 2. <b style="font-weight: normal;" id="docs-internal-guid-3b843861-b3a2-ab50-69cd-4d76ca8626ae"><span style="font-size: 15px; font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">Na
... ... @@ -137,7 +137,7 @@ janela que irá abrir, clique na opção &lt;/span&gt;&lt;span style=&quot;font-size: 15px; fo
137 137 altere o tamanho da opção </span><span style="font-size: 15px; font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: italic; font-variant: normal; text-decoration: none; vertical-align: baseline;">Base
138 138 Memory</span><span style="font-size: 15px; font-family: Arial; color: rgb(0, 0, 0); background-color: transparent; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; vertical-align: baseline;">,
139 139 mova o cursor até o final da linha verde.<br><br>
140   -<div style=text-align:center; >
  140 +<div class="imagemExemplo" >
141 141 <img style="width: 400px; height: 299px;" alt="virtual box" src="imagens/live/vbox1.png"></div>
142 142 <br>
143 143 3. Feito isso, clique em ok e feche o VirtualBox<br>
... ... @@ -146,19 +146,19 @@ mova o cursor até o final da linha verde.&lt;br&gt;&lt;br&gt;
146 146 espere
147 147 a inicialização.<br>
148 148 <br>
149   -<div style=text-align:center; >
  149 +<div class="imagemExemplo" >
150 150 <img style="width: 400px; height: 365px;" alt="vgbox" src="imagens/live/vboxg0.png"></div><br>
151 151  
152 152 6. A senha para o usuário i3geosaude é i3geosaude. Digite a
153 153 senha e clique em iniciar sessão.<br><br>
154   -<div style=text-align:center; >
  154 +<div class="imagemExemplo" >
155 155 <img style="width: 400px; height: 329px;" alt="vboxg1" src="imagens/live/vboxg1.png"></div><br>
156 156  
157 157 7.
158 158 Clique no icone i3GeoSaúde que se encontra na área
159 159 de
160 160 trabalho. E comece a trabalhar!<br><br>
161   -<div style=text-align:center; >
  161 +<div class="imagemExemplo" >
162 162 <img style="width: 400px; height: 316px;" alt="i3geosaude" src="imagens/live/vboxg2.png"></div>
163 163 <br>
164 164 </div>
... ...
docs/objetivos.html
... ... @@ -56,7 +56,7 @@ i3GeoSaúde. Em &quot;Documentação&quot; são apresentados os manuais explicando o
56 56 funcionamento. Para acessar as principais funcionalidades
57 57 do sistema, acesse o menu "Acesse o Sistema".<br>
58 58 <br>
59   -<div style="text-align:center;">
  59 +<div class="imagemExemplo">
60 60 <img alt="funcionalidades principais do i3geosaude" src="imagens/funcionalidades.jpeg">
61 61 </div>
62 62 <br>
... ...
docs/regiao.html
1 1 <!DOCTYPE html>
2 2 <html><head>
3   -
4   -
5 3 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
6 4 <meta charset="UTF-8"><title>Cadastrando nova região</title>
7 5  
... ... @@ -12,9 +10,9 @@
12 10 <div class="f-page-auto-cell" id="doc">
13 11 <div class="imginicio"><img onclick="window.history.back()" style="border: 0px solid ; width: 40px; height: 40px;" alt="inicio" src="files/inicio.gif"></div>
14 12 <h1>Cadastrando
15   -região</h1>
  13 +regi&otilde;es ou localidades</h1>
16 14 <a name="inicio"></a>
17   -<br>
  15 +
18 16 O i3GeoSaúde possibilita cadastrar regiões com
19 17 definições diferentes das previamente
20 18 estabelecidas
... ... @@ -42,29 +40,27 @@ do i3geo ,
42 40 clique no item "Metadados estatísticos", em seguinda no
43 41 subitem
44 42 "Cadastro de Tabelas com regiões
45   -geogáaficas", como desmostrado na <span style="font-weight: bold;">Figura 1</span>.<br>
  43 +geográficas".<br>
46 44 <br>
  45 +<div class="imagemExemplo" >
47 46 <img style="width: 255px; height: 352px;" alt="metatestat" src="imagens/regiao/rg05.jpg"><br>
48   -<span style="font-weight: bold;">Figura
49   -1:</span> Menu Metadados
50   -estatísticos. <br>
51   -<br>
  47 +Menu Metadados
  48 +estatísticos.
  49 +</div>
52 50 <br>
53 51 Na pagina do "Metadados estatísticos - cadastro de tabelas
54 52 de
55 53 regiões geográficas", clique no botão
56 54 "Adicionar
57   -um novo registro, como indicado na <span style="font-weight: bold;">Figura
58   -2</span>.<br>
  55 +um novo registro.<br>
59 56 <br>
  57 +<div class="imagemExemplo" >
60 58 <img style="width: 289px; height: 146px;" alt="nova" src="imagens/regiao/rg01.jpg"><br>
61   -<span style="font-weight: bold;">Figura
62   -2:</span> Botão
63   -adicionar um novo registro.<br>
64   -<br>
  59 +Botão
  60 +adicionar um novo registro.
  61 +</div>
65 62 <br>
66   -Após clicar no botão (<span style="font-weight: bold;">Figura
67   -2</span>) surgirá um novo
  63 +Após clicar no botão de adi&ccedil;&atilde;o, surgirá um novo
68 64 registro, o
69 65 qual
70 66 será usado para o cadastro da nova região. Clique
... ... @@ -75,27 +71,27 @@ janela de
75 71 edição e definir alguns valores, entre eles a
76 72 definição da
77 73 tabela que
78   -será usada para registrar a nova região (ver <span style="font-weight: bold;">Figura 3</span>).<br>
  74 +será usada para registrar a nova região.<br>
79 75 <br>
80 76 <br>
  77 +<div class="imagemExemplo" >
81 78 <img style="width: 600px; height: 116px;" alt="editar" src="imagens/regiao/rg06.jpg"><br>
82   -<span style="font-weight: bold;">Figura
83   -3</span>: novo cadastro de
84   -região.<br>
85   -<br>
  79 +novo cadastro de
  80 +região.
  81 +</div>
86 82 <br>
87 83 Na janela de "Editor" iremos definir alguns campos para a nova
88   -região (<span style="font-weight: bold;">Figura 4</span>),
  84 +região,
89 85 conforme descritos a seguir:<br>
90 86 <br>
91 87 <span style="font-weight: bold;">Nome</span>:
92 88 Defina o nome do novo
93   -tipo de região. No exemplo, visto na <span style="font-weight: bold;">Figura 4</span>,
94   -definiu-se "Micro região".<span style="font-weight: bold;"></span><br>
  89 +tipo de região. No exemplo,
  90 +definiu-se "Micro região".<br>
95 91 <br>
96 92 <span style="font-weight: bold;">Descrição</span>:
97 93 Escreva uma breve descrição sobre o tipo de
98   -região.<span style="font-weight: bold;"></span><br>
  94 +região.<br>
99 95 <br>
100 96 <span style="font-weight: bold;">Código
101 97 da
... ... @@ -109,15 +105,14 @@ Neste exemplo a tabela da nova região esta cadastrada no
109 105 esquema
110 106 ''i3geo_metaestat".<span style="font-weight: bold;"></span><br>
111 107 <br>
  108 +<div class="imagemExemplo" >
112 109 <img style="width: 407px; height: 385px;" alt="dados da região" src="imagens/regiao/rg08.jpg"><br>
113   -<span style="font-weight: bold;">Figura
114   -4:</span> Definindo os atributos de
115   -edição para uma região.<br>
116   -<br>
117   -Ao descer&nbsp;a barra lateral (veja a <span style="font-weight: bold;">Figura
118   -4),
119   -</span>deve-se definir novos campos
120   -do "Editor" (veja a <span style="font-weight: bold;">Figura 5</span>),
  110 +Definindo os atributos de
  111 +edição para uma região.
  112 +</div>
  113 +<br>
  114 +Ao descer&nbsp;a barra lateral deve-se definir novos campos
  115 +do "Editor",
121 116 como a seguir:<br>
122 117 <span style="font-weight: bold;"><br>
123 118 Tabela:</span> Selecione a tabela
... ... @@ -140,16 +135,15 @@ a
140 135 data em que os dados foram coletados (opcional).<span style="font-weight: bold;"></span><br style="font-weight: bold;">
141 136 <br>
142 137 <br>
  138 +<div class="imagemExemplo" >
143 139 <img style="width: 409px; height: 390px;" alt="cadastro" src="imagens/regiao/rg09.jpg">&nbsp;&nbsp;<br>
144   -<span style="font-weight: bold;">Figura
145   -5:</span> Definindo campos
146   -complementares na janela "Editor".<br>
  140 +Definindo campos
  141 +complementares na janela "Editor".
  142 +</div>
147 143 <br>
148   -Após definir os campos da <span style="font-weight: bold;">Figura
149   -5</span>, role para baixo a barra
  144 +Após definir os campos role para baixo a barra
150 145 lateral novamente, e selecione as
151   -novas opções indicadas ( ver <span style="font-weight: bold;">Figura
152   -6</span>), como apresentado abaixo:<br>
  146 +novas opções indicadas como apresentado abaixo:<br>
153 147 <span style="font-weight: bold;"><br>
154 148 Coluna
155 149 com o código de cada
... ... @@ -183,23 +177,25 @@ SRDI: &lt;/span&gt;Já
183 177 automaticamente o código 4326
184 178 por padrão.<span style="font-weight: bold;"></span><br>
185 179 <br>
  180 +<div class="imagemExemplo" >
186 181 <img style="width: 407px; height: 387px;" alt="cadastro" src="imagens/regiao/rg10.jpg"><br>
187   -<span style="font-weight: bold;">Figura
188   -6:</span> Definindo novos campos da
189   -janela "Editor".<br>
190   -<br>
  182 +Definindo novos campos da
  183 +janela "Editor".
  184 +</div>
191 185 <br>
192 186 Após definido todas as informações
193 187 solicitadas,
194   -clique no botão "Salvar" que pode ser visto na <span style="font-weight: bold;">Figura 4</span>.<br>
  188 +clique no botão "Salvar".<br>
195 189 Agora o novo tipo de região está cadastrado e os
196 190 novos
197 191 limites já podem ser definidos.<br>
198 192 <br>
  193 +<div class="imagemExemplo" >
199 194 <img style="width: 600px; height: 209px;" alt="regiào cadastrada." src="imagens/regiao/rg11.jpg"><br>
200   -<span style="font-weight: bold;">Figura
201   -7: </span>Região
202   -cadastrada.<br>
  195 +Região
  196 +cadastrada.
  197 +</div>
  198 +
203 199 </div>
204 200 <div class="trail-box-bottom">
205 201 <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>
... ...
docs/softwaresInstalados.html
... ... @@ -66,7 +66,7 @@ acessar
66 66 tanto o c&oacute;digo como a documenta&ccedil;&atilde;o
67 67 geral da
68 68 ferramenta. <br><br>
69   -<div style=text-align:center; >
  69 +<div class="imagemExemplo" >
70 70 <img style="width: 527px; height: 367px;" alt="pagina i3geo"
71 71 src="imagens/pag_i3geo_portalsoftware.jpg"><br>
72 72 P&aacute;gina do
... ... @@ -106,7 +106,7 @@ desse tipo de software, o que tamb&amp;eacute;m afeta o funcionamento
106 106 do
107 107 i3Geo.<br>
108 108 <br>
109   -<div style=text-align:center; >
  109 +<div class="imagemExemplo" >
110 110 <img style="width: 467px; height: 212px;"
111 111 alt=""
112 112 src="imagens/pag_mapserver.jpg"><br>
... ...
i3geo/i3geosaude/admin.db
No preview for this file type