JS

README.md

@@ -0,0 +1 @@
+# Site com Materiais Didáticos

css/conteudo.css

@@ -1,5 +1,7 @@
 h2 {
  border-bottom: 1px dashed #333;
+ padding-left: 10px;
+ border-left: 5px solid #333;
 }
 
 p {
@@ -11,4 +13,26 @@ p {
 
 p.ident {
  text-indent: 30px;
+}
+
+body { 
+ font-size: 18px;
+}
+
+code {
+ font-size: 18px;
+}
+
+li {
+ line-height: 1.5;
+}
+
+a { 
+ text-decoration: none;
+ border-bottom: 1px dashed lightblue;
+}
+
+a:hover {
+ border-bottom: 1px dashed blue;
+ background-color: #f5f5ff;
 }

disciplinas/dispositivos_moveis/index.html

@@ -0,0 +1,7 @@
+<h1>Dispositivos Móveis</h1>
+
+<h2>Android</h2>
+
+<ul>
+ <li> <a href="../../exemplos/android/como_instalar.html">Como instalar o Android Studio</a></li>
+</ul>

disciplinas/ia/index.html

@@ -1,6 +1,10 @@
 <h2>Inteligência Artificial</h2>
 
 <ul>
+ <li>
+ <a href="../../exemplos/IA/tsp/index.html">Problema do Caixeiro Viajante (PCV) ou <i>Travelling Salesman Problem (TSP)</a>
+ </li>
+
  <li>Estudo do dataset Iris
  <ul>
  <li><a href="https://archive.ics.uci.edu/dataset/53/iris" target="_blank">Dataset</a></li>

disciplinas/programacao_web/index.html

@@ -1,6 +1,8 @@
-<h1>Programação Web</h1>
+<link rel="stylesheet" href="../../css/conteudo.css" />
 
-<h2>HTML</h2>
+<h2>Programação Web</h2>
+
+<h3>HTML</h3>
 
 <ul>
  <li><a href="../../exemplos/html/minha_primeira_pagina.html">Minha primeira página</a></li>
@@ -11,10 +13,16 @@ <h2>HTML</h2>
 
  <li><a href="../../exemplos/html/entidades_html.html">Resolvendo acentuação com entidades HTML</a></li>
 
+ <li><a href="../../exemplos/html/formatacao_texto.html">Formatação de textos</a></li>
+
+ <li><a href="../../exemplos/html/titulos_paragrafos.html">Títulos e parágrafos</a></li>
+
  <li><a href="../../exemplos/html/imagem.html">Imagens</a></li>
 
  <li><a href="../../exemplos/html/listas.html">Listas</a></li>
 
+ <li><a href="../../exemplos/html/tabelas.html">Tabelas</a></li>
+
  <li>Formulários
  <ul>
  <li><a href="../../exemplos/html/formularios/formulario.html">Calculadora</a></li>
@@ -23,19 +31,31 @@ <h2>HTML</h2>
 
  <li><a href="../../exemplos/html/formularios/cadastro_pessoal.html">Cadastro de pessoas</a></li>
  </ul>
- </li> 
+ </li>
+
+ <li>Layout
+ <ul>
+ <li><a href="../../exemplos/html/layout/layout_tabela.html">Layout com tabelas (<code>table</code>)</a></li>
+ </ul>
+ </li>
+
+ <li>iframe
+ <ul>
+ <li><a href="../../exemplos/html/iframe/exemplo_iframe.html">Introdução aos <code>iframes</code></a></li>
+ </ul>
+ </li>
 </ul>
 
-<h2>CSS</h2>
+<h3>CSS</h3>
 
 <ul>
  <li><a href="../../exemplos/html/introducao_css.html">Introdução ao CSS</a></li>
 </ul>
 
-<h2>JavaScript</h2>
+<h3>JavaScript</h3>
 
 <ul>
  <li><a href="../../exemplos/javascript/calculadora.html">Calculadora</a></li>
 </ul>
 
-<h2>PHP</h2>
+<h3>PHP</h3>

exemplos/IA/tsp/index.html

@@ -0,0 +1,14 @@
+<h2>Problema do Caixeiro Viajante (PCV)</h2>
+
+<p>A solução do problema vale $ 1.000.00,00 de dólares,
+oferecidos pelo instituto 
+<a href="https://www.claymath.org/millennium-problems/">Clay Mathematics Institute</a>.
+</p>
+
+
+<p>Veja uma instância do problema:</p>
+
+<img src="./ia.png" style="width: 700px; height: auto;" />
+
+<br />
+<a href="./tsp.jl">Exemplo de modelagem do problema utilizando Julia</a>

exemplos/IA/tsp.jl → exemplos/IA/tsp/tsp.jl

@@ -1,28 +1,28 @@
-struct Cidade
- nome::String
-end
-
-colinas = Cidade("Colinas")
-araguaina = Cidade("Araguaina")
-
-cidades = [ colinas, 
- araguaina,
- Cidade("Bernardo Sayão"),
- Cidade("Palmeirantes"),
- Cidade("Juarina"),
- Cidade("Presidente Kennedy"),
- Cidade("Guaraí"),
- Cidade("Brasilândia") 
- ]
-
-struct Estrada
- cidade_origem::Cidade
- cidade_destino::Cidade
- custo::Float64
-end
-
-e1 = Estrada(colinas, araguaina, 100)
-
-#estradas = [ e1, e2, e3... ]
-
+struct Cidade
+ nome::String
+end
+
+colinas = Cidade("Colinas")
+araguaina = Cidade("Araguaina")
+
+cidades = [ colinas, 
+ araguaina,
+ Cidade("Bernardo Sayão"),
+ Cidade("Palmeirantes"),
+ Cidade("Juarina"),
+ Cidade("Presidente Kennedy"),
+ Cidade("Guaraí"),
+ Cidade("Brasilândia") 
+ ]
+
+struct Estrada
+ cidade_origem::Cidade
+ cidade_destino::Cidade
+ custo::Float64
+end
+
+e1 = Estrada(colinas, araguaina, 100)
+
+#estradas = [ e1, e2, e3... ]
+
 println(e1.custo)

exemplos/android/como_instalar.html

@@ -0,0 +1,3 @@
+<h1>Como Instalar o Android Studio?</h1>
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/SNkBgN0-Gt4?si=-46hxBvrBpQOQImk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

exemplos/git/comandos_iniciais.html

@@ -13,6 +13,14 @@ <h2>Comandos iniciais para uso do Git</h2>
 <strong>git add -A</strong>
 <br />
 
+<p>Na sua primeira vez utilizando o Git será exigido a configuração
+ do seu e-mail e do seu nome:</p>
+
+<strong>git config --global user.email "[email protected]"</strong>
+<br />
+<strong>git config --global user.name "Your Name"</strong>
+<br />
+
 <p>Para descrever o que foi realizado 
  na submissão</p>
 

exemplos/html/formatacao_texto.html

@@ -0,0 +1,15 @@
+<h1>Formatação de textos com HTML</h1>
+
+<b>Texto em Negrito</b>
+<br /><br />
+
+<strong>Também formata em negrito</strong>
+<br /><br />
+
+<i>Texto em Itálico</i>
+<br /><br />
+
+<u>Sublinhado no texto</u>
+<br /><br />
+
+Você pode br<i>in</i>c<b>a</b>r com isto!

exemplos/html/formularios/contato.html

@@ -4,6 +4,8 @@
  <title>Contato</title>
  </head>
  <body>
+ <h2>Formulário de contato</h2>
+
  <form>
  <label for="nome">Nome</label><br />
  <input type="text" name="nome" id="nome" />

exemplos/html/iframe/exemplo_iframe.html

@@ -0,0 +1,39 @@
+<h1>Exemplo de <code>iframe</code></h1>
+
+<a href="pagina1.html" target="moldura">Página 1</a>
+<a href="pagina2.html" target="moldura">Página 2</a>
+<a href="pagina3.html" target="moldura">Página 3</a>
+<br />
+
+<iframe src="pagina1.html" 
+ style="width: 500px; height: 400px" 
+ frameborder="1"
+ name="moldura"></iframe>
+
+<p>O <code>iframe</code> permite criar uma 
+moldura na página. 
+Dentro desta moldura você poderá abrir outra
+página.
+Isto permite a criação de menus para navegação
+do conteúdo do site evitando ter que repetí-los
+em cada página interna.
+</p>
+
+<p>Para isto cada link deve referir como alvo 
+ (<code>target</code>) aquele <code>iframe</code>.
+ Perceba que o nome do <code>iframe</code> é dado
+ pelo atributo <code>name</code>.
+</p>
+
+<p>Recomendo que veja também a 
+ <a href="../layout/layout_tabela.html">criação de 
+ <i>layouts</i> com tabelas</a>.
+ Perceba que um <code>iframe</code> pode ser
+ colocado no lugar do espaço que nomeei de "conteúdo".
+</p>
+
+<h2>Referências</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html" target="_blank">Definições da W3C</a></li>
+</ul> 

exemplos/html/iframe/pagina1.html

@@ -0,0 +1 @@
+<h1>Página 1</h1>

exemplos/html/iframe/pagina2.html

@@ -0,0 +1 @@
+<h1>Página 2</h1>

exemplos/html/iframe/pagina3.html

@@ -0,0 +1 @@
+<h1>Página 3</h1>

exemplos/html/layout/layout_tabela.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Layout com Tabela</title>
+ </head>
+
+ <body>
+ <h1>Construção de <i>layouts</i> com tabelas</h1>
+
+ <table border="1">
+ <tr>
+ <td colspan="2">
+ <h1>Topo</h1>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <ul>
+ <li><a href="#">Inicial</a></li>
+ <li><a href="#">Produtos</a></li>
+ </ul>
+ </td>
+ <td>
+ <h2>Conteúdo</h2>
+
+ <p>Meu primeiro layout</p>
+ </td>
+ </tr>
+
+ <tr>
+ <td colspan="2">Rodapé</td>
+ </tr>
+ </table>
+ </body>
+</html>

exemplos/html/listas.html

@@ -29,11 +29,29 @@ <h3>Lista Ordenada</h3>
 <p>E a <i>tag li</i> significa <i>list item</i>,
 que em português significa item da lista.</p>
 
+<h2>Listas com sub-listas</h2>
+
+<ul>
+ <li>Programação Web
+ <ul>
+ <li>HTML</li>
+ <li>CSS
+ <ol>
+ <li>CSS em linha</li>
+ <li>CSS interno</li>
+ <li>CSS externo</li>
+ </ol>
+ </li>
+ <li>JavaScript</li>
+ </ul>
+ </li>
+</ul>
+
 <h2>Referências</h2>
 
 <ul>
  <li>
- <a href="https://www.w3.org/TR/html401/struct/lists.html">
+ <a href="https://www.w3.org/TR/html401/struct/lists.html" target="_blank">
  W3C
  </a>
  </li>