Jump to content
Fórum Script Brasil
  • 0

Programador Iniciante - Ajuda para Iniciar um Projeto Pessoal


Question

Olá amigos,

Sou um programador frustrado, sempre gostei muito do ramo e iniciei meus estudos muito novo mas acabei desviando meus caminhos para elétrica, hoje curso Eng Elétrica no RJ.

Preciso de uma dica e uma orientação inicial para saber por onde começar e focar meus estudos iniciais. Conheço essa ferramenta a anos: https://tools.schneider-electric.com.br/modulos/regua/default.aspx , e sempre quis saber como fazer algo parecido para um projeto pessoal. Qual seria a linguagem mais fácil para chegar neste resultado ? ou Quais as linguagens e programas que preciso procurar e aprender ? Como se chama este tipo de estrutura, que você vai selecionando as abas em lista suspensa e de acordo com o que vai escolhendo o programa da um resultado final ? Tentei procurar por tabela, lista de escolha, configurador..... mas nunca acho nada parecido com isso para que eu possa aprender. Eu já fiz curso de HTML a muitos anos atrás, também tenho umas noções de Phyton, não sou um zero a esquerda 😎 

Desde já agradeço quem puder contribuir com o conhecimento....ajude a diminuir a ignorância do colega kkkkk !

Link to post
Share on other sites

5 answers to this question

Recommended Posts

  • 0

  

Se tratando de uma aplicação na web, você pode muito bem começar com HTML5, CSS3 e Javascript.

Isso pode te ajudar a se atualizar:

HTML:

http://www.macoratti.net/Cursos/html5/html5_NovosElementos.zip

https://portaldesenvolvedor.com/html/introducao-ao-html5/

 

Javascript:

https://www.codigofonte.net/scripts/javascript/tutoriais/1280_apostilha-javascript

https://www.academia.edu/11637466/Apostila_JavaScript

https://www.scriptbrasil.com.br/codigos/javascript/

 

CSS:

https://w3c.br/pub/Cursos/CursoCSS3/css-web.pdf

Pelo que pude perceber dessa aplicação em execução on-line, tudo é feito através da selecão de opções no formulário do documento HTML.

Então você pode começar pela estrutura básica HTML:

<html>
  <head></head>
  <body></body>
</html>

Vamos inserir entre a tag body um componente Formulário:

Em seguida, incluir entre a tag form um componente select:

Agora, será preciso colocar dentro da tag select os componente option:

<html>
  <head></head>
  <body>
    <form>
      <select>
        <option>Opção 1</option>
        <option>Opção 2</option>
        <option>Opção 3</option>
      </select>
    </form>
   </body>
</html>

Após ter criado a estrutura HTML, é hora de criar um estilo de cores, letras e afins para esta estrutura e isto é feito com CSS. Mas vou me a ter somente ao necessário/essencial e peço que você busque o conhecimento sobre o assunto fazendo pesquisa na internet.

w3schools tem vários exemplos de uso sobre: HTML, CSS e Javascript

 

A LÓGICA FICA POR CONTA DO JAVASCRIPT

Para executar uma função quando seleciona um item option dentro do select do form, você pode se utilizar da linguagem javascript. Por exemplo:

Executar uma função sem a necessidade de clicar num botão depois de selecionar uma opção.

Nesse caso, primeiro você cria a função javascript. Após, você chama ela no evento onchange do elemento select.

Quando uma nova opção for selecionada, dispara o evento onchange, que faz a chamada para a função escolheuItem().

Segue código de exemplo:

Javascript:

<script>
      function escolheuItem(elemento) {
        // Caso você queira extrair o texto e não o valor do value="item A"
        // Basta sustituir o "value" por "text" ou "textContent" ou ainda "innerHTML"
        // Fica assim: window.alert(elemento.text)
        alert(elemento.value);
    }
</script>

 

HTML:

<select name="teste" onchange="escolheuItem(this);">
    <option value="item A">Opção 1</option>
    <option value="item B">Opção 2</option>
    <option value="item C">Opção 2</option>
</select>

 

A lógica para tal feito pode ser conseguido com poucas linhas de codificação em Javascript. Embora, no site original a linguagem utilizada em partes foi asp, isso nos mostra que não foi inteiramente codificada só do lado cliente, e sim boa parte do lado do servidor(Para onde são enviado as opções do formulário, processado, e retorna o resultado final). Mas nada que nos impede de fazer uma engenharia reversa afim de obter o mesmo propósito que nos traz o resultado por uma imagem ilustrativa como resposta do qual cada resultado esta associada a uma seleta combinação entre si.

Mas também pode se desenvolver tal aplicação similar com outros tipos de linguagens de programação.

Basta utilizar a criatividade aliada ao nível de conhecimento que se tem numa certa linguagem de máquina e, esta pode ser tanto de -; "alto nível" -ou-  "baixo nível" (isto é, linguagens de script ou de compilação). Após escolher o tipo de linguagem a ser estudada, é só soltar a imaginação e pensar no que se pode fazer com ela .. surgir-se assim uma idéia de um programa.

Agora, é a hora de definir qual será a lógica deste programa (imagine como ele vai se comportar, faça um esboço(desenhe janelas, campos de texto, botões, adicione imagem) e escreva um roteiro a ser seguido e depois é abrir um editor de texto e codificar e testar, testar e testar novamente, até que funcione conforme o planejado.

Edited by Diego Henrique Guilherme
Link to post
Share on other sites
  • 0
On 2/22/2021 at 5:11 PM, cesarasfilho said:

@Diego Henrique Guilherme seria de grande ajuda meu amigo, estou tentando pesquisar mas realmente é complicado sozinho

Ok, vou desenvolver um exemplo pra você poder mexer e modificar a teu gosto.

 

Observação! - "Continue visitando este post regularmente, pois vou atualizar o código até que fique no ponto ideal para uso."

 

Copie e Cole o Código abaixo, em um bloco de notas [editor de texto] e Salve com o nome que bem entender desde que tenha a extensão .html . Após salvo, abra-o arquivo no seu Navegador Web e veja como ficou o projeto até o momento.
 



<!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
      <style>
         /* Este é um comentário em CSS */
         #conteiner {
         width:75%;
         margin: 0 auto;
         border: thin solid teal;
         border-radius: 5px;
         padding: 20px;
         }
         form {
         width:75%;
         margin: 0 auto;
         }
         fieldset {
         width: 42%;
         padding: 50px;
         border: thin solid teal;
         border-radius: 5px;
         }
         select {
         color: #f00;
         width: 360px;
         height: 30px;
         background: white;
         border: thin solid silver;
         border-radius: 5px;
         }
         option:hover {
         font-weight: bold;
         }
         input {
         background-color: black;
         border: thin solid silver;
         border-radius: 2px;
         color: white;
         padding: 10px 25px;
         }
         input:hover {
         color: black;
         background-color: white;
         cursor: pointer;
         }
         #box {
         display: none;
         position: absolute;
         top: 0%;
         left: 0%;
         width: 100%;
         height: 100%;
         background-color: black;
         z-index:1;
         -moz-opacity: 0.8;
         opacity:.80;
         filter: alpha(opacity=80);
         }
         #shadow {
         display:none;
         position: absolute;
         top: 25%;
         left: 25%;
         width: 50%;
         height: 100%;
         z-index:2;
         padding: 16px;
         border: 1px solid gray;
         border-radius: 5px;
         background-color: white;
         overflow: auto;
         }
         #print {
         width: 75%;
         height: 360px;
         background-color: white;
         margin: 0 auto;
         padding: 20px;
         }
         big { text-align: center; }
         large { float: left; }
         small,img { float: right; display: block; }
         p, span { font-size: 12px; }
         span { color: indianred; }
      </style>
      <script>
         function impressora(){
            var conteudo = document.getElementById('print').innerHTML;
            tela_impressao = window.open('about:blank');
            tela_impressao.document.write(conteudo);
            tela_impressao.window.print();
            tela_impressao.window.close();
         }
         
         document.onclick = function(e) {
         var x = document.getElementById('box');
         var y = document.getElementById('shadow');
         	if (x.style.display != 'box') {
         	  x.style.display='none';	  
         y.style.display='none';
         }
         }
         
         // Code select option in the form
         function Tipo(tipo) {
            var tipo = (tipo.value);
         document.getElementsByName('listTipo')[0].value = tipo;
         document.getElementById('tipo').textContent = tipo;
         console.log(tipo);
         }
         
         function Partida(partida) {
            var partida = (partida.value);
         document.getElementsByName('listPartida')[0].value = partida;
         document.getElementById('partida').textContent = partida;
         console.log(partida);
         }
         
         function Tensao(tensao) {
            var tensao = (tensao.value);
         document.getElementsByName('listTensao')[0].value = tensao;
         document.getElementById('tensao').textContent = tensao;
         console.log(tensao);
         }
         
         function TensaoComando(comando) {
            var comando = (comando.value);
         document.getElementsByName('listTensaoComando')[0].value = comando;
         document.getElementById('comando').textContent = comando;
         console.log(comando);
         }
         
         function Potencia(potencia) {
            var potencia = (potencia.value);
         document.getElementsByName('listPotencia')[0].value = potencia;
         document.getElementById('potencia').textContent = potencia;
         console.log(potencia);
         }
         
         function Corrente(corrente) {
            var corrente = (corrente.value);
         document.getElementsByName('listCorrente')[0].value = corrente;
         document.getElementById('corrente').textContent = corrente;
         console.log(corrente);
         }
         
         function validar(obj_form){
         
         for (var i = 0; i < obj_form.elements.length; i++) {
         if (obj_form.elements[i].type == "text") {
         if (obj_form.elements[i].value == "") {
         alert("Por favor, Preencha o Campo: " + obj_form.elements[i].name);
         obj_form.elements[i].focus();
         return false;
         break;
         }
         }
         }   
	 
	 document.getElementById('box').style.display = 'block';
         document.getElementById('shadow').style.display = 'block';
         var tam = document.body.scrollHeight;
         document.getElementById('box').style.height = (15 + tam) + 'px';
         return false;
          	   return true;	       	                   	     	   
         
         }
         
         function aviso(inative) {
             var msg = (inative.options[inative.selectedIndex].value);
         if(msg) {
         window.open('https://tools.schneider-electric.com.br/modulos/regua/classe_desligamento.aspx', '', 'width=520,height=500,toolbar=no,location=no,left=150,top=100, scrollbars=no'); 
         console.log(msg);
          }
         }
      </script>
   </head>
   <body>
      <!-- Este é um comentário em HTML -->
      <div id="conteiner">
      	 <figura id="fig1">
	 <img src="https://2.bp.blogspot.com/_AMf-sRm3UJE/TFHeEG1mgvI/AAAAAAAAAAU/g2Fc_Qpr_4c/s200/Blog.jpg" width="200px" hieght="157px" align="left">
	 </figura>
         <h2>CÉSAR AS FILHOS</h2>
         <p><strong>Elétrica</strong></p>
         </br>
         <form name="calc" method="post" onSubmit="return validar(this);">
            <fieldset>
               <legend>Escolha de Partidas de Motores</legend>
               <label for="campo1">Tipo de coordenação:</label></br></br>
               <select name="campo1" onchange="Tipo(this)">
                  <option value="Tipo 1" selected="selected">Tipo 1</option>
                  <option value="Tipo 2">Tipo 2</option>
                  <option value="Total">Total</option>
               </select>
               </br></br>
               <label for="campo2">Tipo de partida:</label></br></br>
               <select name="campo2" onchange="Partida(this)">
                  <option value="1" selected="selected">Direta com Disjuntor Termomagnético</option>
                  <option value="2">Direta com Disjuntor Magnético e Relé Térmico</option>
                  <option value="3">Inversor de Frequência</option>
                  <option value="4">Estrela - Triângulo</option>
                  <option value="5">Autotransformador (Compensadora)</option>
                  <option value="6">Softstarter (Partida suave)</option>
                  <option value="7">Direta com Integral</option>
                  <option value="8">Direta com TeSys U</option>
               </select>
               </br></br>
               <label for="campo3">Tensão do Motor (V):</label></br></br>
               <select name="campo3" onchange="Tensao(this)">
                  <option value="220" selected="selected">220</option>
                  <option value="380">380</option>
                  <option value="440">440</option>
               </select>
               </br></br>
               <label for="campo4">Tensão de comando:</label></br></br>
               <select name="campo4" onchange="TensaoComando(this)">
                  <option>Se for necessário selecione ..</option>
                  <option value="F7">110 VCA</option>
                  <option value="M7">220 VCA</option>
                  <option value="Q7">380 VCA</option>
                  <option value="R7">440 VCA</option>
               </select>
               </br></br>
               <label for="campo5">Potência do Motor (CV):</label></br></br>
               <select name="campo5" onchange="Potencia(this)">
                  <option selected="selected">Escolher Potência ..</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7.5">7.5</option>
                  <option value="10">10</option>
                  <option value="12.5">12.5</option>
                  <option value="15">15</option>
                  <option value="20">20</option>
                  <option value="25">25</option>
                  <option value="30">30</option>
                  <option value="40">40</option>
                  <option value="50">50</option>
                  <option value="60">60</option>
                  <option value="75">75</option>
                  <option value="100">100</option>
                  <option value="125">125</option>
                  <option value="150">150</option>
                  <option value="175">175</option>
                  <option value="200">200</option>
               </select>
               </br></br>
               <label for="campo6">Corrente (A):</label></br></br>
               <select name="campo6" onchange="Corrente(this)">
                  <option selected="selected">Escolher Corrente ..</option>
                  <option value="13">13</option>
                  <option value="17">17</option>
                  <option value="20">20</option>
                  <option value="31">31</option>
                  <option value="40">40</option>
                  <option value="54">54</option>
                  <option value="65">65</option>
                  <option value="75">75</option>
                  <option value="112">112</option>
                  <option value="138">138</option>
                  <option value="164">164</option>
                  <option value="195">195</option>
                  <option value="259">259</option>
                  <option value="320">320</option>
                  <option value="381">381</option>
                  <option value="450">450</option>
                  <option value="500">500</option>
                  <option value="675">675</option>
               </select>
               </br></br>
               <label for="inative">Classe de Desligamento:</label></br></br>
               <select name="inative" onchange="aviso(this)">
                  <option selected="selected">Selecione ..</option>
                  <option value="Indisponível" selected="selected">Indisponível</option>
               </select>
               </br>
               </br>
               <hr color="teal" size="1" width="100%"/>
               </br>
               </br>
               <center>
                  <input type="submit" value="Validar">
                  </br>
                  <input type="hidden" name="listTipo" value="" style="color:white">
                  <input type="hidden" name="listPartida" value="" style="color:white">
                  <input type="hidden" name="listTensao" value="" style="color:white">
                  <input type="hidden" name="listTensaoComando" value="" style="color:white">
                  <input type="hidden" name="listPotencia" value="" style="color:white">
                  <input type="hidden" name="listCorrente" value="" style="color:white">
               </center>
      </div>
      </fieldset>
      </form>
      </div>
      <div id="box">
      </div>
      <div id="shadow">
         <div id="print" class="conteudo">
            <big>Potência ou corrente deve ser selecionada</big>
            </br>
            </br>
            <large>A Escolha de Partida de Motor <span id="legenda"></span></large>
            </br>
            </br>
            <small>* Imagem meramente ilustrativa</small>
            </br>
            </br>
            <img src="https://tools.schneider-electric.com.br/modulos/regua/imagens/partida_direta.jpg" align="center">
            <div>
               <!-- Tipo de coordenação -->
               <p>Tipo de coordenação: <span id="tipo"></span></p>
               <!-- Tipo de partida -->
               <p>Tipo de partida: <span id="partida"></span></p>
               <!-- Tensão do Motor (V) -->
               <p>Tensão do Motor (V): <span id="tensao"></span></p>
               <!-- Tensão do comando -->
               <p>Tensão do comando: <span id="comando"></span></p>
               <!-- Poêtncia do Motor (CV) -->
               <p>Poêtncia do Motor (CV): <span id="potencia"></span></p>
               <!-- Corrente (A) -->
               <p>Corrente (A): <span id="corrente"></span></p>
            </div>
         </div>
         <center>
            </br>
            </br>
            </br>
            <hr color="silver" size="1" width="89%">
            <input type="button" onclick="impressora();" value="Imprimir">
         </center>
      </div>
   </body>
</html>


*** Então aqui temos uma pequena Engenharia Reversa do que você quis mostrar no link da sua pergunta. Note que ainda não está completo para o propósito final, ainda farei melhorias quanto a programação das combinações de valores Entre Tipo de Partida, Tensão e Ampéres e outros. Mas por Hoje é só! Quem sabe amanhã acordo um pouco mais animado e dou continuidade. 😉

- Lembre-se de ficar antenado neste seu post para receber as novas notificações assim que eu inserir mais código nesta resposta.

Edited by Diego Henrique Guilherme
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      148955
    • Total Posts
      645010
×
×
  • Create New...