Update UI icons and image

Add contextual commands break & case

Add some examples for case, stop, and switch...case

manual_pt/index.html

@@ -7,20 +7,37 @@
     <link href="../css/bootstrap.min.css" rel="stylesheet" />
     <link href="../css/style.css" rel="stylesheet" />
 <style>
-.image {
-  opacity: 1;
-  display: block;
-  width: 50px;
-  height: auto;
-  transition: .5s ease;
-  backface-visibility: hidden;
-  float:left;
-  margin-top:25px;
-}
-.image:hover {opacity: 0.5;}
-body {font-family: sans-serif, arial}
-.w3-bar-block .w3-bar-item{padding:16px;font-weight:bold}
-#conteudo { width: 900px; height: 300px;}
+  .img-div {
+    margin: auto auto !important;
+    width: 50%;
+  }
+  .img-div img {
+    margin-right: auto;
+    margin-left: auto;
+  }
+  .img-label {
+    display: block;
+    text-align: center;
+    font-style: italic;
+  }
+  .icon_32x32 {
+    width: 32px;
+    height: 32px;
+  }
+  .image {
+    opacity: 1;
+    display: block;
+    width: 50px;
+    height: auto;
+    transition: .5s ease;
+    backface-visibility: hidden;
+    float:left;
+    margin-top:25px;
+  }
+  .image:hover {opacity: 0.5;}
+  body {font-family: sans-serif, arial}
+  .w3-bar-block .w3-bar-item{padding:16px;font-weight:bold}
+  #conteudo { width: 900px; height: 300px;}
 </style>
 
 <script type="text/javascript" src="../ivprogh/js/jquery-3.3.1.min.js"></script>
@@ -180,6 +197,8 @@ function carregar (pagina) { // carragar pagina
       <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_faca.html')" href="#">Faça enquanto verdadeiro</a>
       <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_escolha.html')" href="#">Multipla Escolha</a>
       <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_retorno.html')" href="#">Retorno</a>
+      <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_pare.html')" href="#">Pare</a>
+      <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_caso.html')" href="#">Caso</a>
    
   </div>
 

manual_pt/menu_cmd_caso.html

@@ -0,0 +1,14 @@
+<div class="w3-item"><!-- img src="img/icn_?.png" title="icone comando codigo" class="w3-icon"/ -->
+ 
+  <h3>Caso</h3>
+  
+  <p>
+  Esse comando contextual é utilizado para definir os casos que devem ser analisados pelo programa dentro de uma 
+  estrutura de <a onclick="carregar('menu_cmd_escolha.html')" href="#">múltipla escolha</a>. Note que
+  sem um comando <a onclick="carregar('menu_cmd_pare.html')" href="#">pare</a> a execução ocorre em cascata a partir
+  do primeiro caso verdadeiro. No exemplo abaixo, ambas as mensagens são exibidas.
+  </p>
+  <div class="img-div"><img src="img/ex_case_cmd.png" title="Exemplo de uso do comando caso">
+  <span class="img-label">Exemplo de uso</span>
+  </div>
+</div>

manual_pt/menu_cmd_chamada-funcao.html

@@ -1,8 +1,8 @@
-<div class="w3-item"><!-- img src="img/icn_?.png" title="icone opcao chamar uma funcao" class="w3-icon"/ -->
+<div class="w3-item"><img src="img/icn_cmd_function_call.png" title="icone opcao chamar uma funcao" class="w3-icon icon_32x32"/>
 
 <h3>Chamada de Função</h3>
 
 <p>
-Comando utilizado para chamar ou criar uma função dentro de outra função.
+Comando utilizado para chamar função, definida pelo usuário ou já existente, dentro de outra função.
 </p>
-
+</div>

manual_pt/menu_cmd_comandos.html

@@ -1,19 +1,45 @@
-<div class="w3-item"><img src="img/icn_comandos.png" title="icone opcao " class="w3-icon"/ -->
+<div class="w3-item"><img src="img/icn_cmd.png" title="icone opcao " class="w3-icon icon_32x32"/></div>
 
 <h3>Comandos</h3>
 <p> 
 Os comandos são utilizados para criar a estrutura lógica de um programa.
-No <i>iVProg</i> você poderá adicionar os seguintes comenados:
- entrada de dados (leitura);
- saídas de dados (impressão);
- inserção de comentário;
- atribuição (definir valor para alguma variável);
- chamar função (usada para gerar um valor);
- comando de seleção;
- comando de repetição fixo (laço do tipo <i>para</i>);
- comando de repetição com condição de entrada (laço do tipo <i>repita enquanto</i>);
- comando de repetição com condição de saída (laço do tipo <i>repita até que</i>);
- comando de seleção dentre várias opções;
- comando de devolução (usado em funções).
-</p>
-<img src="img/comandos.png">
+No <i>iVProg</i> você poderá adicionar os seguintes comandos:</p>
+<ul>
+  <li> <b>Comandos principais</b>
+    <ul>
+      <li>entrada de dados (leitura);</li>
+      <li>saídas de dados (impressão);</li>
+      <li>inserção de comentário;</li>
+      <li>atribuição (definir valor para alguma variável);</li>
+      <li>chamar função (usada para gerar um valor);</li>
+      <li>comando de seleção;</li>
+      <li>comando de repetição fixo (laço do tipo <i>para</i>);</li>
+      <li>comando de repetição com condição de entrada (laço do tipo <i>repita enquanto</i>);</li>
+      <li>comando de repetição com condição de saída (laço do tipo <i>repita até que</i>);</li>
+      <li>comando de seleção dentre várias opções;</li>
+      <li>comando de devolução (usado em funções).</li>
+    </ul>
+  </li>
+</ul>
+<div class="img-div">
+  <img src="img/btn_cmd.png"/>
+  <span class="img-label">Comandos Principais</span>
+</div>
+<ul>
+  <li> <b>Comandos contextuais</b>
+    <ul>
+      <li>Pare</li>
+      <li>caso</li>
+      <!--li>caso contrário</li -->
+    </ul>
+  </li>
+</ul>
+<p>
+  Note que os comandos contextuais estão disponíveis apenas nos comandos com suporte e são acessados através do ícone
+  <img src="img/icn_subcmd.png" title="icone opcao " class="w3-icon icon_32x32" style="display:inline-block"/>
+</p> 
+
+<div class="img-div">
+  <img src="img/btn_subcmd.png"/>
+  <span class="img-label">Comandos contextuais</span>
+</div>

manual_pt/menu_cmd_escolha.html

@@ -4,6 +4,10 @@
 
 <p>
 O comando <b>escolha</b>,tem várias estruturas de decisão aninhadas.
-Ela Permite ir diretamente para um bloco de comandos, dependendo do valor de uma variável de verificação.
+Ela permite ir diretamente para um bloco de comandos, dependendo do valor de uma variável de verificação. Para
+mais informações veja os comandos <a onclick="carregar('menu_cmd_pare.html')" href="#">pare</a> e <a onclick="carregar('menu_cmd_caso.html')" href="#">caso</a>
 </p>
+<div class="img-div"><img src="img/ex_case_cmd.png" title="Exemplo de uso do comando escolha">
+  <span class="img-label">Exemplo de uso</span>
+  </div>
 </div>

manual_pt/menu_cmd_pare.html

@@ -0,0 +1,16 @@
+<div class="w3-item"><!-- img src="img/icn_?.png" title="icone comando codigo" class="w3-icon"/ -->
+ 
+  <h3>Pare</h3>
+  
+  <p>
+  Esse comando contextual é utilizado para interromper a execução de estruturas de repetição 
+  (<a onclick="carregar('menu_cmd_repita.html')" href="#">repita N vezes</a>,
+  <a onclick="carregar('menu_cmd_enquanto.html')" href="#">enquanto verdadeiro</a>,
+  <a onclick="carregar('menu_cmd_faca.html')" href="#">faça enquanto</a>) 
+  e de <a onclick="carregar('menu_cmd_escolha.html')" href="#">múltipla escolha</a>.
+  Ele pode ser usado apenas nesses contextos, qualquer outra utilização é inválida.
+  </p>
+  <div class="img-div"><img src="img/ex_pare_cmd.png" title="Exemplo de uso do comando pare">
+  <span class="img-label">Exemplo de uso</span>
+  </div>
+</div>