LInE
/
www-ivprog


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
							<!DOCTYPE html>
<head>
    <title>iVProgH Tutorial</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="css/w3.css" />
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <link href="../css/style.css" rel="stylesheet" />
<style>
  .main-img-div img {
    width: 90%;
    margin: 10px;
  }
  .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>
<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="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #03396c;">
      <b><a class="navbar-brand" href="../">iVProgH</a></b>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="../" 
               title="Navigate to iVProgH homepage.">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="../sobre_ivprog.html"
               title="Know what iVProgH is and what iVProgH is for.">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="../ex_pt/index.html"
               title="See some examples and test iVProgH online.">Examples</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="../download.html"
               title="Download a copy of iVProgH for your computer.">Download</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="../manual_pt/index.html" 
                title="Access online iVProgH manual and learn about all the features.">Help</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="../bugs/report.html"
               title="Send a message to the iVProgH team.">Contact</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="//www.usp.br/line/"
               title="Meet the Laboratory of Informatics in Education of the Institute of Mathematics and Statistics of USP.">LInE</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="../docs/"
               title="Get access to all iVProgH documentation.">Developers</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="../publicacoes.html"
               title="Read the team publications about iVProgH.">Publications</a>
          </li>
        </ul>
        <div class="form-inline my-2 my-lg-0">
          <img src="../img/img_flag_brazil.png" />
          <img src="../img/img_flag_usa.png" ;>
        </div>
      </div>
    </nav>

<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">Modes of programming<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="#">Text</a>
 
  </div>


<a class="w3-bar-item w3-button" onclick="manuItem('ferramentas')" href="javascript:void(0)" style="color:#001A66;;font-size:11pt">Toolbar<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="#">Import</a>
    <a class="w3-bar-item w3-button" onclick="carregar('menu_bf_exportar.html')" href="#">Export</a>
    <a class="w3-bar-item w3-button" onclick="carregar('menu_bf_desfazer.html')" href="#">Undo</a>
    <a class="w3-bar-item w3-button" onclick="carregar('menu_bf_refazer.html')" href="#">Redo</a>
    <a class="w3-bar-item w3-button" onclick="carregar('menu_bf_executar.html')" href="#">Run</a>
    <a class="w3-bar-item w3-button" onclick="carregar('menu_bf_avaliar.html')" href="#">Evaluate</a>
    <a class="w3-bar-item w3-button" onclick="carregar('menu_bf_ajuda.html')" href="#">Help</a>
  </div>

<a class="w3-bar-item w3-button" onclick="manuItem('variaveis')" href="javascript:void(0)" style="color:#001A66;;font-size:11pt">Variables<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="#">Global Variable</a>
    <a class="w3-bar-item w3-button" onclick="carregar('menu_var_variavel-local.html')" href="#">Local Variable</a>
   
  </div>

<a class="w3-bar-item w3-button" onclick="manuItem('comandos')" href="javascript:void(0)" style="color:#001A66;font-size:11pt">Commands<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="#">iVProgH Commands</a> <!-- manual_pt/menu_cmd_comandos.html -->
      <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_leitura.html')" href="#">Data Reading</a>
      <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_escrever.html')" href="#">Data Writing</a>
      <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_comentario.html')" href="#">Comments</a>
      <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_atribuicao.html')" href="#">Assignment</a>
      <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_chamada-funcao.html')" href="#">Function call</a>
      <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_se.html')" href="#">If true then</a>
      <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_repita.html')" href="#">Repeat N times</a>
      <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_enquanto.html')" href="#">While true</a>
      <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_faca.html')" href="#">Do while true</a>
      <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_escolha.html')" href="#">Multiple choice</a>
      <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_retorno.html')" href="#">Return</a>
      <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_pare.html')" href="#">Break</a>
      <a class="w3-bar-item w3-button" onclick="carregar('menu_cmd_caso.html')" href="#">Case</a>
   
  </div>
  <a class="w3-bar-item w3-button" onclick="manuItem('funcao')" href="javascript:void(0)" style="color:#001A66;;font-size:11pt">Function<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="#">Function structure</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;">
  <br/> &nbsp; <br/>
  <a href="index.html" ><img src="img/icn_home.png" title="Back to top" /> </a>
  <i class="w3-xxxlarge" style="margin-left: 5%">iVProgH Tutorial</i>
</div>

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

<h2 style="color:#001A66;">What is iVProgH?</h2>

<p>
The <b>iVProgH</b> (Interactive Visual Programming on the Internet)  is one of the free-code educational systems of the
<a href="https://line.ime.usp.br" title="visit page of the Laboratory of Informatics in Education">LInE</a>,
being intended for teaching and learning of algorithms e programming. 
The <b>iVProgH</b> can be loaded directly into <i>World Wide Web</i> (Web).
</p>

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


</div>
</body>
</html>