index.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <!DOCTYPE html>
  2. <head>
  3. <title>Introdução à programação</title>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1" />
  6. <link rel="stylesheet" href="css/w3.css" />
  7. <link href="./bootstrap.min.css" rel="stylesheet" />
  8. <link href="./css/style.css" rel="stylesheet" />
  9. <style>
  10. .image {
  11. opacity: 1;
  12. display: block;
  13. width: 50px;
  14. height: auto;
  15. transition: .5s ease;
  16. backface-visibility: hidden;
  17. float:left;
  18. margin-top:25px;
  19. }
  20. .image:hover {opacity: 0.5;}
  21. body {font-family: sans-serif, arial}
  22. .w3-bar-block .w3-bar-item{padding:16px;font-weight:bold}
  23. #conteudo { width: 900px; height: 300px;}
  24. </style>
  25. <script type="text/javascript" src="./js/jquery.min.js"></script>
  26. <script>
  27. // Open and close the sidebar on medium and small screens
  28. function w3_open() {
  29. document.getElementById("mySidebar").style.display = "block";
  30. document.getElementById("myOverlay").style.display = "block";
  31. }
  32. function w3_close() {
  33. document.getElementById("mySidebar").style.display = "none";
  34. document.getElementById("myOverlay").style.display = "none";
  35. }
  36. // Change style of top container on scroll
  37. window.onscroll = function() {myFunction()};
  38. function myFunction () {
  39. if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
  40. document.getElementById("myTop").classList.add("w3-card-4", "w3-animate-opacity");
  41. document.getElementById("myIntro").classList.add("w3-show-inline-block");
  42. } else {
  43. document.getElementById("myIntro").classList.remove("w3-show-inline-block");
  44. document.getElementById("myTop").classList.remove("w3-card-4", "w3-animate-opacity");
  45. }
  46. }
  47. // Accordions
  48. function manuItem (id) {
  49. var x = document.getElementById(id);
  50. if (x.className.indexOf("w3-show") == -1) {
  51. x.className += " w3-show";
  52. x.previousElementSibling.className += " w3-theme";
  53. } else {
  54. x.className = x.className.replace("w3-show", "");
  55. x.previousElementSibling.className =
  56. x.previousElementSibling.className.replace(" w3-theme", "");
  57. }
  58. }
  59. function carregar (pagina) { // carragar pagina
  60. $("#conteudo").load(pagina);
  61. }
  62. </script>
  63. </head>
  64. <body>
  65. <nav class="w3-sidebar w3-bar-block w3-collapse w3-animate-left w3-card" style="z-index:3;width:250px;" id="mySidebar">
  66. <a class="w3-bar-item w3-button" onclick="carregar('intro.html')" style="color:#001A66;;font-size:11pt" href="#">Introdução<i class="fa fa-caret-down"></i></a>
  67. <a class="w3-bar-item w3-button" onclick="carregar('algoritmo_explic.html')" style="color:#001A66;;font-size:11pt" href="#">1 - O que é um algoritmo?<i class="fa fa-caret-down"></i></a>
  68. <a class="w3-bar-item w3-button" onclick="manuItem('comandos_basicos')" href="javascript:void(0)" style="color:#001A66;;font-size:11pt">2 - Comandos Básicos<i class="fa fa-caret-down"></i></a>
  69. <div id="comandos_basicos" class="w3-hide">
  70. <a class="w3-bar-item w3-button" onclick="carregar('comandos_C.html')" href="#">2.1 - C</a>
  71. <a class="w3-bar-item w3-button" onclick="carregar('comandos_Python.html')" href="#">2.2 - Python</a>
  72. <a class="w3-bar-item w3-button" onclick="carregar('comandos_iVProg.html')" href="#">2.3 - iVProg</a>
  73. </div>
  74. <a class="w3-bar-item w3-button" onclick="manuItem('desenvolvendo_alg')" href="javascript:void(0)" style="color:#001A66;;font-size:11pt">3 - Desenvolvendo um Algoritmo<i class="fa fa-caret-down"></i></a>
  75. <div id="desenvolvendo_alg" class="w3-hide">
  76. <a class="w3-bar-item w3-button" onclick="carregar('perguntas_Basicas.html')" href="#">3.1 - Perguntas Básicas</a>
  77. <a class="w3-bar-item w3-button" onclick="carregar('ex1_somatorio.html')" href="#">3.2 - Somatório</a>
  78. <a class="w3-bar-item w3-button" onclick="carregar('ex2_potencia.html')" href="#">3.3 - Potência</a>
  79. </div>
  80. </nav>
  81. <div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" id="myOverlay"></div>
  82. <div class="w3-main" style="margin-left:250px;">
  83. <div id="cabecalho" class="w3-container" style=" background-color:#001A66;color: white;">
  84. <br/> &nbsp; <br/>
  85. <i class="w3-xxxlarge" style="margin-left: 5%">Introdução à programação</i>
  86. </div>
  87. <div class="w3-container" style="padding:32px" id="conteudo">
  88. <h2>Introdução</h2>
  89. <p>
  90. O objetivo desta apostila é introduzir o conceito de algoritmos (seção 2) e, principalmente, apresentar algumas dicas sobre como deduzir um algoritmo que resolva um dado problema. Para isto, iremos introduzir comandos nas linguagens <b>C</b> e <b>Python</b>. Iremos deduzir algoritmos a partir de alguns problemas/exemplos.
  91. </p>
  92. <p>
  93. Esta dedução será construtiva: começaremos analisando casos particulares e só então generalizaremos na forma de um algoritmo. E como uma técnica auxiliar, propomos ao programador iniciante que tente construir seus algoritmos a partir de quatro questões básicas descritas na seção 3.
  94. </p>
  95. </div>
  96. </body>
  97. </html>