LInE
/
www-ivprog


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
							<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Tutorial iVProgH</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" href="css/w3.css" />

<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;}
</style>

<script type="text/javascript" src="../ivprogh/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../ivprogh/js/jquery-ui.js"></script>

<script>
// Open and close the sidebar on medium and small screens
function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
  document.getElementById("myOverlay").style.display = "block";
  }
function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
  document.getElementById("myOverlay").style.display = "none";
  }

// Change style of top container on scroll
window.onscroll = function() {myFunction()};

function myFunction () {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("myTop").classList.add("w3-card-4", "w3-animate-opacity");
    document.getElementById("myIntro").classList.add("w3-show-inline-block");
  } else {
    document.getElementById("myIntro").classList.remove("w3-show-inline-block");
    document.getElementById("myTop").classList.remove("w3-card-4", "w3-animate-opacity");
    }
  }

// Accordions
function manuItem (id) {
  var x = document.getElementById(id);
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
    x.previousElementSibling.className += " w3-theme";
  } else {
    x.className = x.className.replace("w3-show", "");
    x.previousElementSibling.className = 
    x.previousElementSibling.className.replace(" w3-theme", "");
    }
  }

function carregar (pagina) { // carragar pagina
  $("#conteudo").load(pagina);
  }
</script>
</head>


<body>


<div class="w3-item"><img src="img/icn_bf_avalia.png" title="icone opcao avaliar codigo" class="w3-icon"/>
<div class="w3-item"><img src="img/icn_ajuda.png" title="icone opcao de ajuda" class="w3-icon"/>

<nav class="w3-sidebar w3-bar-block w3-collapse w3-animate-left w3-card" style="z-index:3;width:250px;" id="mySidebar">

<a class="w3-bar-item w3-button" onclick="manuItem('visual')" href="javascript:void(0)" style="color:#001A66;font-size:11pt">Formas de programação<i class="fa fa-caret-down"></i></a>

  <div id="visual" class="w3-hide">
    <a class="w3-bar-item w3-button" onclick="carregar('menu_fp_visual.html')"href="#">Visual</a>
    <a class="w3-bar-item w3-button" onclick="carregar('menu_fp_textual.html')"href="#">Textual</a>
 
  </div>


<a class="w3-bar-item w3-button" onclick="manuItem('ferramentas')" href="javascript:void(0)" style="color:#001A66;;font-size:11pt">Barra de ferramentas<i class="fa fa-caret-down"></i></a>

  <div id="ferramentas" class="w3-hide">
    <a class="w3-bar-item w3-button" onclick="carregar('menu_bf_novo.html')" href="#">Novo</a>
    <a class="w3-bar-item w3-button" onclick="carregar('menu_bf_gravar.html')" href="#">Gravar</a>
    <a class="w3-bar-item w3-button" onclick="carregar('menu_bf_importar.html')" href="#"> Importar</a>
    <a class="w3-bar-item w3-button" onclick="carregar('menu_bf_exportar.html')" href="#">Exportar</a>
    <a class="w3-bar-item w3-button" onclick="carregar('menu_bf_desfazer.html')" href="#">Desfazer</a>
    <a class="w3-bar-item w3-button" onclick="carregar('menu_bf_refazer.html')" href="#">Refazer</a>
    <a class="w3-bar-item w3-button" onclick="carregar('menu_bf_executar.html')" href="#">Executar</a>
  </div>

<a class="w3-bar-item w3-button" onclick="manuItem('variaveis')" href="javascript:void(0)" style="color:#001A66;;font-size:11pt">Variáveis<i class="fa fa-caret-down"></i></a>

  <div id="variaveis" class="w3-hide">
    <a class="w3-bar-item w3-button" onclick="carregar('menu_var_variavel-global.html')" href="#">Variável Global</a>
    <a class="w3-bar-item w3-button" onclick="carregar('menu_var_variavel-local.html')" href="#">Variável Local</a>
   
  </div>

<a class="w3-bar-item w3-button" onclick="manuItem('funcao')" href="javascript:void(0)" style="color:#001A66;;font-size:11pt">Função<i class="fa fa-caret-down"></i></a>

  <div id="funcao" class="w3-hide">
    <a class="w3-bar-item w3-button" onclick="carregar('menu_fc_funcao.html')" href="#">Estrutura da função</a>
  </div>

<a class="w3-bar-item w3-button" onclick="manuItem('comandos')" href="javascript:void(0)" style="color:#001A66;font-size:11pt">Comandos<i class="fa fa-caret-down"></i></a>

    <div id="comandos" class="w3-hide">
      <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_comandos.html')" href="#">Comandos iVProgH</a>
      <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_leitura.html')" href="#">Leitura de dados</a>
      <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_escrever.html')" href="#">Escrita de dados</a>
      <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_comentario.html')" href="#">Comentários</a>
      <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_atribuicao.html')" href="#">Atribuição</a>
      <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_chamada-funcao.html')" href="#">Chamada de função</a>
      <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_se.html')" href="#">Se verdadeiro então</a>
      <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_repita.html')" href="#">Repita N vezes</a>
      <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_enquanto.html')" href="#">Enquanto verdadeiro</a>
      <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>
   
  </div>


</nav>

<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" id="myOverlay"></div>

<div class="w3-main" style="margin-left:250px;">

<div id="cabecalho" class="w3-container" style=" background-color:#001A66;color: white;">
<a href="index.html" ><img src="img/home.png"  class="image"width="50px" title="Voltar para o inicio"> </a>
<h1 class="w3-xxxlarge" style="margin-left: 5%">Tutorial iVProgH</h1>
</div>

<div class="w3-container" style="padding:32px"  id="conteudo">

<h2 style="color:#001A66;">O que é o iVProgH?</h2>

<p>
O <b>iVProgH</b> (Programação Visual interativa na Internet) é um dos sistemas educacionais de código livre do
<a href="https://line.ime.usp.br" title="visitar pagina do Laboratorio de Informatica na Educacao">LInE</a>,
sendo destinado ao ensino e à aprendizagem de algoritmos e programação. 
O <b>iVProgH</b> pode ser carregado diretament em páginas <i>World Wide Web</i> (Web).
</p>

<hr>
<h2 style="color:#001A66;">Interface</h2>
<img src="img/interface.png">


</div>

</body>
</html>