<!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> .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="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"> <a href="../index.html"><img src="../img/img_flag_brazil.png"/></a> <a href="../en/index.html"><img src="../img/img_flag_usa.png"/></a> </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> <a class="w3-bar-item w3-button" onclick="carregar('menu_bf_avaliar.html')" href="#">Avaliar</a> <a class="w3-bar-item w3-button" onclick="carregar('menu_bf_ajuda.html')" href="#">Ajuda</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('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> <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> </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/> <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>