Ver código fonte

Organizando os arquivos e o menu

Igor 6 anos atrás
pai
commit
9fcb1e22a1

+ 32 - 17
bugs/report.html

@@ -10,37 +10,52 @@
 
   <body>
     <nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #03396c;">
-      <b><a class="navbar-brand" href="#">iVProgH</a></b>
+      <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 active">
-            <a class="nav-link" href="#">Home</a>
+          <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="manual_pt/index.html" title="manual iVProgH">Conheça</a>
+            <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="ex_pt/index.html">Exemplos</a>
+            <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">
-            <a class="nav-link" href="#">Download</a>
+            <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 active">
+            <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="../bugs/report.html">Informar uma falha</a>
+            <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="#">LInE</a>
+            <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="#">Ajuda</a>
+            <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">
+          <img src="../img/img_flag_brazil.png" />
+          <img src="../img/img_flag_usa.png" ;>
         </div>
       </div>
     </nav>
@@ -53,9 +68,9 @@
         </div>
       </div>
       <div class="container ivprog-container" style="padding: 3em; margin-top: 3em;">
-      	<h4>Informar uma falha</h4>
-      	<p style="color: gray">Obrigado pelo interesse em informar os problemas encontrados no iVProgH! <br />
-      		Por favor, preencha os campos abaixo e nos conte o que aconteceu.</p>
+      	<h4>Contato</h4>
+      	<p style="color: gray">Obrigado pelo interesse em entrar em contato com a equipe do iVProgH! <br />
+      		Por favor, preencha os campos abaixo.</p>
       	<form action="get.php" method="post" class="needs-validation" novalidate>
       		<input type="hidden" name="redirect" value="report.html">
       		<div class="form-group row">
@@ -71,17 +86,17 @@
 			    </div>
 			</div>
 			<div class="form-group row">
-				<label for="inputsummary" class="col-sm-2 col-form-label">Falha resumida:</label>
+				<label for="inputsummary" class="col-sm-2 col-form-label">Assunto:</label>
 				<div class="col-sm-10">
 			    	<input type="text" class="form-control" id="inputsummary" name="summary">
 			    </div>
 			</div>
 			<div class="form-group row">
-				<label for="inputdetails" class="col-sm-2 col-form-label">Falha detalhada:*</label>
+				<label for="inputdetails" class="col-sm-2 col-form-label">Mensagem:*</label>
 				<div class="col-sm-10">
 			    	<textarea id="inputdetails" class="form-control" name="details" style="height: 15em;" required></textarea>
 			    	<div class="invalid-feedback">
-			        	Por favor, conte-nos exatamente o que aconteceu!
+			        	Por favor, nos forneça uma mensagem!
 			        </div>
 			    </div>
 			</div>

+ 85 - 0
docs/index.html

@@ -0,0 +1,85 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>iVProgH - LInE (free educational software and contents)</title>
+    <link href="../css/bootstrap.min.css" rel="stylesheet">
+    <link href="../css/style.css" rel="stylesheet">
+  </head>
+
+  <body>
+    <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">
+            <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 active">
+            <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>
+
+    <main role="main">
+      <div class="jumbotron ivprogh-desc">
+        <div class="container">
+          <h1>iVProgH</h1>
+          
+        </div>
+      </div>
+      <div class="container ivprog-container" style="padding: 3em; margin-top: 3em;">
+      	<h4>Documentação do iVProgH</h4>
+      	<p style="color: gray">Aqui você encontra toda a documentação do iVProgH</p>
+      	
+      </div>
+    </main>
+    <footer class="container text-center">
+      <a href="http://www.ime.usp.br/line">iVProgH</a> | 
+      <a href="http://www.ime.usp.br/line">LInE</a> |
+      <a href="http://www.matematica.br">iM&aacute;tica</a>
+    </footer>
+
+    <script src="../js/jquery.min.js"></script>
+    <script src="../js/bootstrap.bundle.min.js"></script>
+  </body>
+</html>

+ 156 - 0
download.html

@@ -0,0 +1,156 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>iVProgH - LInE (free educational software and contents)</title>
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/style.css" rel="stylesheet">
+  </head>
+
+  <body>
+     <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 active">
+            <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">
+            <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>
+
+    <main role="main">
+      
+      <div class="container ivprog-container" style="width:900px">
+           <!-- Page Content -->
+      <div class="container" style="margin-top:50px;" >
+
+      <!-- Portfolio Item Heading -->
+      <h1 class="my-4">iVProg - Visual Programming
+        <small>LInE-IME-USP</small>
+      </h1>
+
+      <!-- Portfolio Item Row -->
+      <div class="row">
+
+        <div class="col-md-8">
+          <figure>
+          <img class="img-fluid" width="500px" height="250px" src="img/ivprogalfa.jpeg" alt="Imagem da interface do iVProg-nova versão">
+            <figcaption align="center"> iVProg versão Alfa </figcaption>
+</figure>
+        </div>
+
+        <div class="col-md-4">
+          <h3 class="my-3">Sobre o iVProg</h3>
+          <p>O iVProgH é sistema educacional livre, implementado em HTML5 (usa fortemente JavaScript), está destinado ao ensino e aprendizagem de algoritmos e programação. Sua versão Web,dispõe de um esquema para avaliação automática de exercícios. O iVProg foi desenhado a partir de um modelo visual para programação, podendo ser utilizado desde o segundo ciclo do Ensino Fundamental.</p>
+          <a href="#"> Ir para o manual </a>
+        </div>
+
+      </div>
+      <!-- /.row -->
+
+      <!-- Related Projects Row -->
+      <h3 class="my-4" style="margin-top: 5px">Versões do iVProg</h3>
+
+      <div class="row">
+
+        <div class="col-md-3 col-sm-6 mb-4">
+          <a href="versao-java.html">
+            <img class="img-fluid" src="img/ivjava.png" alt="">
+              <p class="legenda-versoes">Versão Java</p>
+          </a>
+         
+        </div>
+
+        <div class="col-md-3 col-sm-6 mb-4">
+          <a href="ivprog-html.html">
+            <img class="img-fluid" src="img/ivprog-html.png" alt="">
+            <p class="legenda-versoes">Versão HTML</p>
+          </a>
+        </div>
+
+        <div class="col-md-3 col-sm-6 mb-4">
+          <a href="versao-alfa.html">
+            <img class="img-fluid" src="img/ivprog-novo.jpg" alt="">
+            <p class="legenda-versoes">Versão Alfa</p>
+          </a>
+        </div>
+        </div>
+
+      </div>
+      <!-- /.row -->
+
+<h3 class="my-4" style="margin-top: 5px">Publicações</h3>
+<div class="row">
+
+  <ul>
+    <li>KAMIYA, Reginaldo Rideaki; BRANDÃO, Leônidas O. iVProg-um sistema para introdução à Programação através de um modelo Visual na Internet. Anais do XX Simpósio Brasileiro de Informática na Educaç a. Florianópolis, SC, 2009.</li>
+    <li>DE OLIVEIRA BRANDÃO, Leônidas; BRANDÃO, Anarosa Alves Franco; DA SILVA RIBEIRO, Romenig. iVProg–uma ferramenta de programaçao visual para o ensino de algoritmos. In: Anais dos Workshops do Congresso Brasileiro de Informática na Educação. 2012.</li>
+ <li>RIBEIRO, Romenig Silva et al. iVProg e iTarefa: aprimorando o ensino de algoritmos e programação para iniciantes. In: Anais dos Workshops do Congresso Brasileiro de Informática na Educação. 2012.</li>
+  <li>DA SILVA RIBEIRO, Romenig; BRANDÃO, Leônidas de O.; BRANDÃO, Anarosa AF. Uma visão do cenário Nacional do Ensino de Algoritmos e Programação: uma proposta baseada no Paradigma de Programção Visual. In: Brazilian Symposium on Computers in Education (Simpósio Brasileiro de Informática na Educação-SBIE). 2012.</li>
+   <li>KAMIYA, Reginaldo Rideaki. iVProg: um sistema visual para ensino-aprendizagem de programação via web. 2009. Tese de Doutorado. Dissertação de Mestrado, Instituto de Matemática e Estatística-USP. Citado na pág. 12, 69.</li>
+    <li>RODRIGUES, Patrícia Alves; DE OLIVEIRA BRANDÃO, Leônidas. iTarefa: componente Moodle para incorporar Módulos de Aprendizagem Interativa em cursos WEB. In: Anais dos Workshops do Congresso Brasileiro de Informática na Educação. 2012.</li>
+
+     </ul>
+
+</div>
+
+
+
+    </div>
+    <!-- /.container -->
+
+      </div>
+
+    </main>
+    <footer class="container text-center">
+      <a href="http://www.ime.usp.br/line">iVProgH</a> | 
+      <a href="http://www.ime.usp.br/line">LInE</a> |
+      <a href="http://www.matematica.br">iM&aacute;tica</a>
+    </footer>
+
+    <script src="js/jquery.min.js"></script>
+    <script src="js/bootstrap.bundle.min.js"></script>
+  </body>
+</html>

+ 27 - 9
ex_pt/index.html

@@ -85,34 +85,52 @@
 
   <body>
     <nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #03396c;">
-      <b><a class="navbar-brand" href="#">iVProgH</a></b>
+      <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 active">
-            <a class="nav-link" href="#">Home</a>
+            <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">
-            <a class="nav-link" href="#">Conheça</a>
+            <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="#">Exemplos</a>
+            <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="#">Download</a>
+            <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="#">LInE</a>
+            <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="#">Ajuda</a>
+            <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">
+          <img src="../img/img_flag_brazil.png" />
+          <img src="../img/img_flag_usa.png" ;>
         </div>
       </div>
     </nav>

BIN
img/ivjava.png


BIN
img/ivprog-html.png


BIN
img/ivprog-novo.jpg


BIN
img/ivprogalfa.jpeg


BIN
img/versao-html.PNG


BIN
img/versao-java.PNG


+ 26 - 9
index.html

@@ -10,30 +10,47 @@
 
   <body>
     <nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #03396c;">
-      <b><a class="navbar-brand" href="#">iVProgH</a></b>
+      <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 active">
-            <a class="nav-link" href="#">Home</a>
+            <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="conheca resumidamente o que e' e para que serve o iVProgH">Conheça</a>
+            <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">Exemplos</a>
+            <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</a>
+            <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">
-            <a class="nav-link" href="#">LInE</a>
+            <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="manual_pt/index.html" title="manual iVProgH">Manual</a>
+            <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">
@@ -64,7 +81,7 @@
           A <a href="ivprog1/" title="primeira versao iVProg em Java">primeira versão do <i>iVProg</i></a> foi implementada em <i>Java</i> em 2009.
           </p>
 
-          <a class="btn btn-primary" href="manual_pt/index.html" role="button" title="manual iVProgH">Saiba mais &raquo;</a>
+          <a class="btn btn-primary" href="./sobre_ivprog.html" role="button" title="Conheça resumidamente o que é e para que serve o iVProgH.">Saiba mais &raquo;</a>
         </div>
       </div>
       <div class="container ivprog-container">

+ 91 - 0
ivprog-html.html

@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>iVProgH - LInE (free educational software and contents)</title>
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/style.css" rel="stylesheet">
+  </head>
+
+  <body>
+    <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 active">
+            <a class="nav-link" href="#">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="manual_pt/index.html" title="manual iVProgH">Conheça</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="ex_pt/index.html">Exemplos</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Download</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="bugs/report.html">Informar uma falha</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">LInE</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Ajuda</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>
+
+    <main role="main">
+      
+      <div class="container ivprog-container" style="width:900px">
+           <!-- Page Content -->
+      <div class="container" style="margin-top:50px;" >
+
+      <!-- Portfolio Item Heading -->
+      <h1 class="my-4">iVProg - Visual Programming
+        <small>LInE-IME-USP</small>
+      </h1>
+
+      <!-- Portfolio Item Row -->
+      <div class="row">
+
+        <div class="col-md-8">
+          <figure>
+          <img class="img-fluid" width="500px" height="250px" src="img/versao-html.png" alt="Imagem da interface do iVProg-nova versão">
+            <figcaption align="center"> iVProg versão HTML </figcaption>
+</figure>
+        </div>
+
+        <div class="col-md-4">
+          <h3 class="my-3">Sobre o iVProg</h3>
+          <p>O iVProgH é sistema educacional livre, implementado em HTML5 (usa fortemente JavaScript), está destinado ao ensino e aprendizagem de algoritmos e programação. Sua versão Web,dispõe de um esquema para avaliação automática de exercícios. O iVProg foi desenhado a partir de um modelo visual para programação, podendo ser utilizado desde o segundo ciclo do Ensino Fundamental.</p>
+          <a href="http://www.matematica.br/ivprogh5/manual/"> Ir para o manual </a>
+        </div>
+
+<button type="button" class="btn btn-primary" style="margin-left:50%;margin-bottom: 30px" onclick="javascript:window.history.go(-1)"> Voltar</button>
+    </div>
+    <!-- /.container -->
+
+      </div>
+
+    </main>
+    <footer class="container text-center">
+      <a href="http://www.ime.usp.br/line">iVProgH</a> | 
+      <a href="http://www.ime.usp.br/line">LInE</a> |
+      <a href="http://www.matematica.br">iM&aacute;tica</a>
+    </footer>
+
+    <script src="js/jquery.min.js"></script>
+    <script src="js/bootstrap.bundle.min.js"></script>
+  </body>
+</html>

+ 3 - 3
manual_pt/css/w3.css

@@ -24,8 +24,8 @@ legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}t
 [type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}
 ::-webkit-input-placeholder{color:inherit;opacity:0.54}
 ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
-/* End extract */
-html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
+
+/*html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}*/
 h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}.w3-serif{font-family:serif}
 h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
 hr{border:0;border-top:1px solid #eee;margin:20px 0}
@@ -148,7 +148,7 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-button:hover{color:#fff!important;background-color:#001A66!important}
 .w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
 .w3-hover-none:hover{box-shadow:none!important}
-/* Colors */
+
 .w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
 .w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
 .w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}

+ 30 - 15
manual_pt/index.html

@@ -77,41 +77,56 @@ function carregar (pagina) { // carragar pagina
 <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>
+    <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 active">
-            <a class="nav-link" href="#">Home</a>
+          <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="conheca resumidamente o que e' e para que serve o iVProgH">Conheça</a>
+            <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">Exemplos</a>
+            <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</a>
+            <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="#">LInE</a>
+            <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="manual_pt/index.html" title="manual iVProgH">Manual</a>
+            <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" />
+          <img src="../img/img_flag_brazil.png" />
+          <img src="../img/img_flag_usa.png" ;>
         </div>
-        -->
       </div>
-</nav>
+    </nav>
 
 <nav class="w3-sidebar w3-bar-block w3-collapse w3-animate-left w3-card" style="z-index:3;width:250px;" id="mySidebar">
 

+ 93 - 0
publicacoes.html

@@ -0,0 +1,93 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <title>iVProgH - LInE (free educational software and contents)</title>
+    <link href="css/bootstrap.min.css" rel="stylesheet" />
+    <link href="css/style.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <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">
+            <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 active">
+            <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>
+
+    <main role="main">
+      <div class="jumbotron ivprogh-desc">
+        <div class="container">
+          <h1>Publicações</h1>
+          Nessa página, você encontra as publicações a respeito do iVProgH, produzidas pelo grupo de pesquisa do Laboratório de Informática na Educação do Instituto de Matemática e Estatística da USP.
+        </div>
+      </div>
+      <div class="container ivprog-container">
+        <p>
+          <ul>
+            <li>KAMIYA, Reginaldo Rideaki; BRANDÃO, Leônidas O. iVProg-um sistema para introdução à Programação através de um modelo Visual na Internet. Anais do XX Simpósio Brasileiro de Informática na Educaç a. Florianópolis, SC, 2009.</li>
+            <li>DE OLIVEIRA BRANDÃO, Leônidas; BRANDÃO, Anarosa Alves Franco; DA SILVA RIBEIRO, Romenig. iVProg–uma ferramenta de programaçao visual para o ensino de algoritmos. In: Anais dos Workshops do Congresso Brasileiro de Informática na Educação. 2012.</li>
+            <li>RIBEIRO, Romenig Silva et al. iVProg e iTarefa: aprimorando o ensino de algoritmos e programação para iniciantes. In: Anais dos Workshops do Congresso Brasileiro de Informática na Educação. 2012.</li>
+            <li>DA SILVA RIBEIRO, Romenig; BRANDÃO, Leônidas de O.; BRANDÃO, Anarosa AF. Uma visão do cenário Nacional do Ensino de Algoritmos e Programação: uma proposta baseada no Paradigma de Programção Visual. In: Brazilian Symposium on Computers in Education (Simpósio Brasileiro de Informática na Educação-SBIE). 2012.</li>
+            <li>KAMIYA, Reginaldo Rideaki. iVProg: um sistema visual para ensino-aprendizagem de programação via web. 2009. Tese de Doutorado. Dissertação de Mestrado, Instituto de Matemática e Estatística-USP. Citado na pág. 12, 69.</li>
+            <li>RODRIGUES, Patrícia Alves; DE OLIVEIRA BRANDÃO, Leônidas. iTarefa: componente Moodle para incorporar Módulos de Aprendizagem Interativa em cursos WEB. In: Anais dos Workshops do Congresso Brasileiro de Informática na Educação. 2012.</li>
+          </ul>
+        </p>
+      </div>
+
+    </main>
+    <footer class="container text-center">
+      <a href="http://www.ime.usp.br/line">iVProgH</a> | 
+      <a href="http://www.ime.usp.br/line">LInE</a> |
+      <a href="http://www.matematica.br">iM&aacute;tica</a>
+    </footer>
+
+    <script src="js/jquery-min.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+  </body>
+</html>

+ 25 - 10
sobre_ivprog.html

@@ -10,37 +10,52 @@
 
   <body>
     <nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #03396c;">
-      <b><a class="navbar-brand" href="#"><i>iVProgH</i></a></b>
+      <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 active">
-            <a class="nav-link" href="#">Home</a>
+            <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="manual_pt/index.html" title="manual iVProgH">Conheça</a>
+            <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">
-            <a class="nav-link" href="ex_pt/index.html">Exemplos</a>
+            <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="#">Download</a>
+            <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="bugs/report.html">Informar uma falha</a>
+            <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="#">LInE</a>
+            <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="#">Ajuda</a>
+            <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">
+          <img src="img/img_flag_brazil.png" />
+          <img src="img/img_flag_usa.png" ;>
         </div>
       </div>
     </nav>

+ 103 - 0
versao-alfa.html

@@ -0,0 +1,103 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>iVProgH - LInE (free educational software and contents)</title>
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/style.css" rel="stylesheet">
+  </head>
+
+  <body>
+    <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="manual_pt/index.html" title="manual iVProgH">Conheça</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="ex_pt/index.html">Exemplos</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Download</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="bugs/report.html">Informar uma falha</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">LInE</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Ajuda</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>
+
+    <main role="main">
+      
+      <div class="container ivprog-container" style="width:900px">
+           <!-- Page Content -->
+      <div class="container" style="margin-top:50px;" >
+
+      <!-- Portfolio Item Heading -->
+      <h1 class="my-4">iVProg - Visual Programming
+        <small>LInE-IME-USP</small>
+      </h1>
+
+      <!-- Portfolio Item Row -->
+      <div class="row">
+
+        <div class="col-md-8">
+          <figure>
+          <img class="img-fluid" width="500px" height="250px" src="img/ivprogalfa.jpeg" alt="Imagem da interface do iVProg-nova versão">
+            <figcaption align="center"> iVProg versão Alfa </figcaption>
+</figure>
+        </div>
+
+        <div class="col-md-4">
+          <h3 class="my-3">Sobre o iVProg</h3>
+          <p>O iVProgH é sistema educacional livre, implementado em HTML5 (usa fortemente JavaScript), está destinado ao ensino e aprendizagem de algoritmos e programação. Sua versão Web,dispõe de um esquema para avaliação automática de exercícios. O iVProg foi desenhado a partir de um modelo visual para programação, podendo ser utilizado desde o segundo ciclo do Ensino Fundamental.</p>
+          <a href="#"> Ir para o manual </a>
+        </div>
+
+      </div>
+      <!-- /.row -->
+
+      <!-- Related Projects Row -->
+
+<h3 class="my-4" style="margin-top: 5px">Releases</h3>
+<div class="row">
+
+  <ul>
+    <li> <a href="#">Release 01 </a></li>
+    <li> <a href="#">Release 02 </a></li>
+     </ul>
+
+</div>
+<button type="button" class="btn btn-primary" style="margin-left:50%;margin-bottom: 30px" onclick="javascript:window.history.go(-1)"> Voltar</button>
+    </div>
+    <!-- /.container -->
+
+      </div>
+
+    </main>
+    <footer class="container text-center">
+      <a href="http://www.ime.usp.br/line">iVProgH</a> | 
+      <a href="http://www.ime.usp.br/line">LInE</a> |
+      <a href="http://www.matematica.br">iM&aacute;tica</a>
+    </footer>
+
+    <script src="js/jquery.min.js"></script>
+    <script src="js/bootstrap.bundle.min.js"></script>
+  </body>
+</html>

+ 91 - 0
versao-java.html

@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>iVProgH - LInE (free educational software and contents)</title>
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/style.css" rel="stylesheet">
+  </head>
+
+  <body>
+    <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 active">
+            <a class="nav-link" href="#">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="manual_pt/index.html" title="manual iVProgH">Conheça</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="ex_pt/index.html">Exemplos</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Download</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="bugs/report.html">Informar uma falha</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">LInE</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Ajuda</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>
+
+    <main role="main">
+      
+      <div class="container ivprog-container" style="width:900px">
+           <!-- Page Content -->
+      <div class="container" style="margin-top:50px;" >
+
+      <!-- Portfolio Item Heading -->
+      <h1 class="my-4">iVProg - Visual Programming
+        <small>LInE-IME-USP</small>
+      </h1>
+
+      <!-- Portfolio Item Row -->
+      <div class="row">
+
+        <div class="col-md-8">
+          <figure>
+          <img class="img-fluid" width="500px" height="250px" src="img/versao-java.png" alt="Imagem da interface do iVProg-nova versão">
+            <figcaption align="center"> iVProg versão Java </figcaption>
+</figure>
+        </div>
+
+        <div class="col-md-4">
+          <h3 class="my-3">Sobre o iVProg</h3>
+          <p>A versão Java permite que você possa descarregar o pacote iVProg e rodá-lo como aplicativo Java em seu computador. Para isso <a href="http://www.matematica.br/ivprog2/iVProg2.jar">clique aqui</a> e grave-o em seu computador. Se tiver o Java instalado, basta um "clique" duplo sobre o mesmo para iniciá-lo.</p>
+          <a href="http://www.matematica.br/ivprog2/index.html"> Ir para o manual </a>
+        </div>
+
+<button type="button" class="btn btn-primary" style="margin-left:50%;margin-bottom: 30px" onclick="javascript:window.history.go(-1)"> Voltar</button>
+    </div>
+    <!-- /.container -->
+
+      </div>
+
+    </main>
+    <footer class="container text-center">
+      <a href="http://www.ime.usp.br/line">iVProgH</a> | 
+      <a href="http://www.ime.usp.br/line">LInE</a> |
+      <a href="http://www.matematica.br">iM&aacute;tica</a>
+    </footer>
+
+    <script src="js/jquery.min.js"></script>
+    <script src="js/bootstrap.bundle.min.js"></script>
+  </body>
+</html>