LInE
/
www-ivprog


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
							<!DOCTYPE html>
<head>
    <title>Tutorial iVProgH</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>
  .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="Navegue para a página inicial do site do iVProgH.">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="../sobre_ivprog.html"
               title="Conheça resumidamente o que é e para que serve o iVProgH.">Conheça</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="../ex_pt/index.html"
               title="Veja alguns exemplos e teste o iVProgH online.">Exemplos</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="../download.html"
               title="Faça uma cópia do iVProgH para sua máquina.">Download</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="../manual_pt/index.html" 
               title="Acesse um manual online do iVProgH e conheça todos os recursos.">Ajuda</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="../bugs/report.html"
               title="Envie uma mensagem para a equipe do iVProgH.">Contato</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="//www.usp.br/line/"
               title="Conheça o Laboratório de Informática na Educação do Instituto de Matemática e Estatística da USP.">LInE</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="../docs/"
               title="Tenha acesso a toda a documentação do iVProgH.">Desenvolvedores</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="../publicacoes.html"
               title="Leia as publicações da equipe a respeito do iVProgH.">Publicações</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">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> <!-- manual_pt/menu_cmd_comandos.html -->
      <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>
      <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>


</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="Voltar para o inicio" /> </a>
  <i class="w3-xxxlarge" style="margin-left: 5%">Tutorial iVProgH</i>
</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>