×
Ir ao conteúdo
  • Cadastre-se

Marcelo Calazans

Membro Pleno
  • Posts

    199
  • Cadastrado em

  • Última visita

Tópicos solucionados

  1. O post de Marcelo Calazans em Como remover ferramentas de material 3D no photoshop? foi marcado como solução   
    Olá colega.
     
    Já faz um tempo que você perguntou, e, portanto, suponho que você já deva ter resolvido o problema, mas caso contrário, observe com atenção a imagem abaixo que creio que ele pode ajudar a resolver sua dúvida.
     

     
    Abraços e espero ter ajudado.
  2. O post de Marcelo Calazans em alguém me dá uma explicação dessas tags? foi marcado como solução   
    @Swalls
    Desculpe me intrometer no assunto, mas queria dar uma opinião.
     
    <article> <aside> <details> <figcaption> <figure> <footer> <header>
    Esses acima, são Elementos Semânticos em HTML.

    O programador ou desenvolvedor é uma pessoa “as vezes desleixada”, e digo isso porque eu fui assim por muito tempo.

    É comum vermos códigos totalmente desorganizados e sem padrão.

    Os Elementos Semânticos em HTML foram criados para “disciplinar” um pouco o desenvolvedor, e convence-lo a criar códigos mais organizados.

    Um elemento semântico, pode descrever claramente seu significado para o navegador, para outros desenvolvedores e para os motores de busca.

    Algumas pessoas citam que quando os Elementos Semânticos em HTML são usados de maneira correta, isso ajuda o SEO do site e colabora com a classificação dele na busca do Google, pois facilita o entendimento da página. ( https://searchengineland.com/seo-advantages-of-machine-readable-html5-semantic-markup-314455 )
     
    Referência geral abaixo:
    https://www.w3schools.com/html/html5_semantic_elements.asp
     
    <div class="header"> <!-- Conteúdo --> </div> <header> <!-- Conteúdo --> </header>  
    No exemplo acima, ambos os casos vão funcionar, mas devemos procurar usar sempre os Elementos Semânticos em HTML.
     
    Abraços e espero ter colaborado.
  3. O post de Marcelo Calazans em Formatação da "Barra de Navegação" foi marcado como solução   
    @Joel Martins
    Olá colega.
     
    Testando apenas a sua "navegation bar" aqui, no código abaixo ela funciona, pelo menos ela aparece com a formatação:
     
    <html> <style> body { margin:0; font-family:Arial; } .topnav { overflow: hidden; background-color: #333; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .active { background-color: #04AA6D; color: white; } .topnav .icon { display: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .topnav a:hover, .dropdown:hover .dropbtn { background-color: #555; color: white; } .dropdown-content a:hover { background-color: #ddd; color: black; } .dropdown:hover .dropdown-content { display: block; } @media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive { position: relative; } .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown { float: none; } .topnav.responsive .dropdown-content { position: relative; } .topnav.responsive .dropdown .dropbt { display: block; width: 100%; text-align: left; } } </style> <body> <div class='topnav' id='myTopnav'> <a href='../../' class='active'>Home</a> <a href='../sobre.html'>Sobre</a> <a href='../redessociais.html'>Redes Sociais</a> <div class='dropdown'> <button class='dropbtn'>Escola <i class='fa fa-caret-down'></i> </button> <div class='dropdown-content'> <a href='ano1.php'>1º Ano</a> <a href='../ano2/ano2.php'>2º Ano</a> <a href='../ano3/ano3.php'>3º Ano</a> </div> </div> <a href='javascript:void(0);' style='font-size:15px;' class='icon' onclick='myFunction()'>&#9776;</a> </div> <div style='padding-left:16px'> </div> <script> function myFunction() { var x = document.getElementById('myTopnav'); if (x.className === 'topnav') { x.className += ' responsive'; } else { x.className = 'topnav'; } } </script> </body> </html>  
    Vejo portanto, que o problema deve estar nas suas chamadas:
     
    <?php require"../Navigation_Bar_/navegation_bar_.php"; ?> <link rel='stylesheet' href='navegation_bar_.css'> require"../Navigation_Bar_/navegation_bar_.html";  
    Veja se os caminhos estão corretos e tente estruturar melhor isso.
     
    Sugestão para testar:
     
    Deixe o CSS junto com o arquivo para testar, como está no meu codigo acima, e faça apenas uma chamada para esse código usando:
     
    <?php include_once("arquivo da barra com o caminho CORRETO");?>  
    Veja se funciona.
     
    Abraços e espero ter ajudado.
  4. O post de Marcelo Calazans em bug no meu jogo em html, css e javascript foi marcado como solução   
    @Xispeh
    Olá colega.
     
    Eu acho que eu arrumei.
     
    Testei jogando uns 5 minutos e não deu mais erro comigo. Segue abaixo o JS que eu alterei:
     
    function start(){ $("#inicio").hide(); $("#fundoGame").append("<div id='jogador' class='anima1'></div>"); $("#fundoGame").append("<div id='inimigo1' class='anima2'></div>"); $("#fundoGame").append("<div id='inimigo2'></div>"); $("#fundoGame").append("<div id='amigo' class='anima3'></div>"); var wentrou_colisao2 = 0; var wentrou_colisao3 = 0; var podeAtirar=true; var fimdejogo=false; var jogo = {} var velocidade=4; var posicaoY = parseInt(Math.random() * 280); var TECLA = { W: 87, S: 83, D: 68 } jogo.pressionou = {}; $(document).keydown(function(e){jogo.pressionou[e.which] = true;}); $(document).keyup(function(e){jogo.pressionou[e.which] = false;}); jogo.timer = setInterval(loop,15); function loop() { movefundo(); movejogador(); moveinimigo1(); moveinimigo2(); moveamigo(); colisao(); } function movefundo(){ esquerda = parseInt($("#fundoGame").css("background-position")); $("#fundoGame").css("background-position",esquerda-1); } function movejogador(){ if (jogo.pressionou[TECLA.W]){ var topo = parseInt($("#jogador").css("top")); $("#jogador").css("top",topo-7);} if (topo<=-50){ $("#jogador").css("top",topo+6); } if (jogo.pressionou[TECLA.S]){ var topo = parseInt($("#jogador").css("top")); $("#jogador").css("top",topo+7)} if (topo>=390){ $("#jogador").css("top",topo-6) } if (jogo.pressionou[TECLA.D]){ disparo(); } } function moveinimigo1(){ posicaoX = parseInt($("#inimigo1").css("left")); $("#inimigo1").css("left",posicaoX-velocidade); $("#inimigo1").css("top",posicaoY); if (posicaoX<=0){ posicaoY = parseInt(Math.random() * 280); $("#inimigo1").css("left",800); $("#inimigo1").css("top",posicaoY); } } function moveinimigo2(){ posicaoX = parseInt($("#inimigo2").css("left")); $("#inimigo2").css("left",posicaoX-2); if (posicaoX<=0){ $("#inimigo2").css ("left", 785);} } function moveamigo(){ posicaoX = parseInt($("#amigo").css("left")); $("#amigo").css("left",posicaoX+1); if (posicaoX>850){ $("#amigo").css("left",0);} } function disparo(){ if (podeAtirar==true) { podeAtirar=false; topo = parseInt($("#jogador").css("top")) posicaoX= parseInt($("#jogador").css("left")) tiroX = posicaoX + 180; topoTiro=topo+105; $("#fundoGame").append("<div id='disparo' class='anima4'></div"); $("#disparo").css("top",topoTiro); $("#disparo").css("left",tiroX); var tempoDisparo=window.setInterval(executaDisparo, 30); function executaDisparo(){ posicaoX = parseInt($("#disparo").css("left")); $("#disparo").css("left",posicaoX+15); if (posicaoX>880){ window.clearInterval(tempoDisparo); tempoDisparo=null; $("#disparo").remove(); podeAtirar=true; } } } } function colisao() { var colisao1 = ($("#jogador").collision($("#inimigo1"))); var colisao2 = ($("#jogador").collision($("#inimigo2"))); var colisao3 = ($("#disparo").collision($("#inimigo1"))); var colisao4 = ($("#disparo").collision($("#inimigo2"))); var colisao5 = ($("#jogador").collision($("#amigo"))); var colisao6 = ($("#inimigo2").collision($("amigo"))); if (colisao1.length>0 && wentrou_colisao3 == 0) { inimigo1X = parseInt($("#inimigo1").css("left")); inimigo1Y = parseInt($("#inimigo1").css("top")); explosao1(inimigo1X,inimigo1Y); posicaoY = parseInt(Math.random() * 280); $("#inimigo1").css("left",800); $("#inimigo1").css("top",posicaoY); } if (colisao2.length>0 && wentrou_colisao2 == 0) { inimigo2X = parseInt($("#inimigo2").css("left")); inimigo2Y = parseInt($("#inimigo2").css("top")); explosao2(inimigo2X,inimigo2Y); $("#inimigo2").remove(); reposicionaInimigo2(); wentrou_colisao2 = 1; } if (colisao3.length>0 && wentrou_colisao3 == 0) { inimigo1X = parseInt($("#inimigo1").css("left")); inimigo1Y = parseInt($("#inimigo1").css("top")); explosao1(inimigo1X,inimigo1Y); $("#disparo").css("left",950); posicaoY = parseInt(Math.random() * 280); $("#inimigo1").css("left",800); $("#inimigo1").css("top",posicaoY); wentrou_colisao3 = 1; } if (colisao4.length>0 && wentrou_colisao2 == 0) { inimigo2X = parseInt($("#inimigo2").css("left")); inimigo2Y = parseInt($("#inimigo2").css("top")); $("#inimigo2").remove(); explosao2(inimigo2X,inimigo2Y); $("#disparo").css("left",950); reposicionaInimigo2() } if (colisao5.length>0){ reposicionaAmigo(); $("#amigo").remove(); } } //Fim da função colisao() function explosao1(inimigo1X,inimigo1Y) { $("#fundoGame").append("<div id='explosao1' class='anima5'></div"); $("#explosao1").css("background-image", "url(img/explosion.png)"); var div=$("#explosao1"); div.css("top", inimigo1Y+20); div.css("left", inimigo1X+50); var tempoExplosao=window.setInterval(removeExplosao, 500); function removeExplosao() { div.remove(); window.clearInterval(tempoExplosao); tempoExplosao=null; wentrou_colisao3 = 0; } } // Fim da função explosao1() function explosao2(inimigo2X,inimigo2Y) { $("#fundoGame").append("<div id='explosao2' class='anima6'></div"); $("#explosao2").css("background-image", "url(img/explosion.png)"); var div2=$("#explosao2"); div2.css("top", inimigo2Y+15); div2.css("left", inimigo2X+50); var tempoExplosao2=window.setInterval(removeExplosao2, 500); function removeExplosao2() { div2.remove(); window.clearInterval(tempoExplosao2); tempoExplosao2=null; wentrou_colisao2 = 0; } } function reposicionaInimigo2() { var tempoColisao4=window.setInterval(reposiciona4, 5000); function reposiciona4() { window.clearInterval(tempoColisao4); tempoColisao4=null; if (fimdejogo==false) { $("#fundoGame").append("<div id=inimigo2></div"); } } } function reposicionaAmigo(){ var tempoAmigo=window.setInterval(reposiciona6, 6000); function reposiciona6(){ window.clearInterval(tempoAmigo); tempoAmigo=null; if (fimdejogo==false){ $("#fundoGame").append("<div id='amigo' class='anima3'></div>") } } } }  
    Eu percebi que estava entrando no IF da colisão duas vezes em alguns momentos. Então eu coloquei duas variáveis a mais para controlar.
     
    Teste para ver se funciona.
     
    Pode ser que tenha uma forma melhor de fazer isso, mas parece que o erro sumiu aqui nos meus testes.
     
    Abraços e espero ter ajudado.
  5. O post de Marcelo Calazans em Como centralizar box model e deixar responsivo foi marcado como solução   
    @EddK
    Olá colega.
     
    Deixei o box centralizado para você, e estou mostrando como deixar o box responsivo usando CSS Media Queries ( https://www.w3schools.com/css/css3_mediaqueries_ex.asp ). 
     
    Agora cabe a você acertar o texto dentro do box usando a mesma ideia do Media Queries.
     
    Existiria outras formas de deixar o box responsivo, mas no desenvolvimento web é difícil fugir totalmente das Media Queries, e elas são muito úteis.
     
    Segue o código:
     
    <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <title>Modal</title> <style> .modal-wrap { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.7); z-index: 99999; opacity: 0; -webkit-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } .modal-wrap:target { opacity: 1; pointer-events: auto; } .modal-wrap>div { width: 560px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px 10px; background: #fff; } .modal-content__descript { display: block; width: 100%; } .modal-content__descript p { color: #666; font-size: 12px; margin: 10px 0; height: 50px; padding: 30px 10px; } .close { position: absolute; width: 30px; right: 20px; top: 20px; text-align: center; line-height: 30px; font-size: 20px; color: #333; text-decoration: none; } @media (max-width: 1367px){ .modal-wrap>div { width: 480px; } } @media (max-width: 1150px){ .modal-wrap>div { width: 400px; } } @media (max-width: 901px){ .modal-wrap>div { width: 380px; } } @media (max-width: 640px){ .modal-wrap>div { width: 350px; } } @media (max-width: 480px){ .modal-wrap>div { width: 320px; } } @media (max-width: 360px){ .modal-wrap>div { width: 300px; } } @media (max-width: 320px){ .modal-wrap>div { width: 280px; } } </style> </head> <body> <div> <a href="#code-1">acessar modal</a> </div> <div class="modal"> <div id="code-1" class="modal-wrap"> <div class="modal-content"> <div class="modal-content__descript"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in not only five</p> </div> <a href="#close" title="Fechar" class="close"><i class="faz fa-times"></i></a> </div> </div> </div> </body> </html>  
     
    Abraços.
  6. O post de Marcelo Calazans em Efeito hover em botão html foi marcado como solução   
    Gostei de fazer isso, é uma brincadeira interessante.
     
    Confesso que nunca tinha pensado em fazer isso, mas achei legal.
     
    Mudei algumas coisas e acho que ficou melhor, mas o deles é muito bom, difícil fazer exatamente igual.
     
    O meu modelo tem algumas limitações estruturais, e se fosse para fazer um exatamente igual ao deles, teria que partir de outro princípio eu acho.
     
    Veja o código novo:
     
    <html> <body> <style> .container-butt { position: absolute; top: 10px; left: 10px; z-index: 2; background-color: #ecfae5; width: 240px; border: 1px solid #46C600; border-radius: 8px; } .container-butt p { text-align: right; color: #255909; font-style: bold; margin-right: 8px; } .but { position: absolute; top: 0px; left: 0px; background-color: #46C600; border: none; color: #337b0c; width: 200px; height: 50px; z-index: 1; transition: all 0.5s 0s ease; border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .but p { padding: 0; margin: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: white; font-weight: bold; font-size: 16px; } .but:after { top: 5px; right: -17px; background-image: linear-gradient(36deg, #b1cea8, #c6e8b8 38%, #c9e0be 47%, #c0e1b3 51%, rgba(255,255,255,0) 54%) !important; transform-origin: center top; border-radius: 5px; transform: rotate(35deg); position: absolute; margin-right: -27.5px; content: ""; width: 43px; height: 55px; border-top-left-radius: 10px; border-top-right-radius: 10px; transform-origin: top; -webkit-transition: all 0.5s 0s ease; -moz-transition: all 0.5s 0s ease; transition: all 0.5s 0s ease; } .but:hover:after { border-radius:5px; top: 8px; right: -22px; width:48px; height:60px; border-top-left-radius:10px; border-top-right-radius:10px; border-width:0; transform-origin:top; transform: rotate(42deg); } .but:hover { width: 170px; background-color: #3aa300; } </style> <div class="container-butt"> <p>Clube do Hardware</p> <button class="but"><p>Ver Cupom</p></button> </div> </body> </html>  
    Com certeza tem uma forma melhor de se fazer isso, e se eu precisasse fazer isso em um site de um cliente, eu iria parar para pensar um pouco em uma solução mais estável.
     
    Vamos aguardar para ver se algum outro colega tem uma opção melhor.
     
    Abraços.
  7. O post de Marcelo Calazans em Site de Noticias, armazenamento. foi marcado como solução   
    @Mizrain Phelipe Sá
    Olá colega.
     
    Não sei se isso pode te ajudar, mas vou narrar um pouco do meu problema com isso.
     
    Eu também não gosto de CMS´s como WordPress, mas respeito e conheço pessoas que usam, e compreendo a sua utilidade.
     
    Não gosto de criar blogs, mas as vezes, o cliente quer inserir um blog em seu website, e sou forçado a fazer.
     
    O que eu faço é usar apenas o banco de dados do WordPress e utilizar também o painel de controle do WordPress, para que o cliente possa criar livremente as suas postagens de forma dinâmica.
     
    Depois eu faço uma estrutura em PHP lendo o banco de dados do WordPress, e desenvolvo o site na mão, como eu gosto de fazer normalmente.
     
    O pior desses CMS´s todos, não é nem o banco de dados, são os temas prontos (eu acho eles horríveis).
     
    O WordPress também tem outra solução para isso, que é a WordPress REST API  ( https://developer.wordpress.org/rest-api/  ), neste caso é até mais fácil, pois você pode criar seu site manualmente, e usar apenas o “core” do WordPress. 
     
    Para quem está neste dilema seu, acho que vale a pena analisar essas opções. Eu passei por uma coisa bem parecida e no meu caso ajudou.
     
    Abraços e espero que esse ideia ajude em algo.
  8. O post de Marcelo Calazans em Site de Noticias, armazenamento. foi marcado como solução   
    @Mizrain Phelipe Sá
    Olá colega.
     
    Não sei se isso pode te ajudar, mas vou narrar um pouco do meu problema com isso.
     
    Eu também não gosto de CMS´s como WordPress, mas respeito e conheço pessoas que usam, e compreendo a sua utilidade.
     
    Não gosto de criar blogs, mas as vezes, o cliente quer inserir um blog em seu website, e sou forçado a fazer.
     
    O que eu faço é usar apenas o banco de dados do WordPress e utilizar também o painel de controle do WordPress, para que o cliente possa criar livremente as suas postagens de forma dinâmica.
     
    Depois eu faço uma estrutura em PHP lendo o banco de dados do WordPress, e desenvolvo o site na mão, como eu gosto de fazer normalmente.
     
    O pior desses CMS´s todos, não é nem o banco de dados, são os temas prontos (eu acho eles horríveis).
     
    O WordPress também tem outra solução para isso, que é a WordPress REST API  ( https://developer.wordpress.org/rest-api/  ), neste caso é até mais fácil, pois você pode criar seu site manualmente, e usar apenas o “core” do WordPress. 
     
    Para quem está neste dilema seu, acho que vale a pena analisar essas opções. Eu passei por uma coisa bem parecida e no meu caso ajudou.
     
    Abraços e espero que esse ideia ajude em algo.
  9. O post de Marcelo Calazans em Site de Noticias, armazenamento. foi marcado como solução   
    @Mizrain Phelipe Sá
    Olá colega.
     
    Não sei se isso pode te ajudar, mas vou narrar um pouco do meu problema com isso.
     
    Eu também não gosto de CMS´s como WordPress, mas respeito e conheço pessoas que usam, e compreendo a sua utilidade.
     
    Não gosto de criar blogs, mas as vezes, o cliente quer inserir um blog em seu website, e sou forçado a fazer.
     
    O que eu faço é usar apenas o banco de dados do WordPress e utilizar também o painel de controle do WordPress, para que o cliente possa criar livremente as suas postagens de forma dinâmica.
     
    Depois eu faço uma estrutura em PHP lendo o banco de dados do WordPress, e desenvolvo o site na mão, como eu gosto de fazer normalmente.
     
    O pior desses CMS´s todos, não é nem o banco de dados, são os temas prontos (eu acho eles horríveis).
     
    O WordPress também tem outra solução para isso, que é a WordPress REST API  ( https://developer.wordpress.org/rest-api/  ), neste caso é até mais fácil, pois você pode criar seu site manualmente, e usar apenas o “core” do WordPress. 
     
    Para quem está neste dilema seu, acho que vale a pena analisar essas opções. Eu passei por uma coisa bem parecida e no meu caso ajudou.
     
    Abraços e espero que esse ideia ajude em algo.
  10. O post de Marcelo Calazans em Quanto tempo leva para dominar uma linguagem? (C#, JavaScript etc) foi marcado como solução   
    Olá colega.
     
    Trabalho com programação desde a década de 90, e já atuei como programador de várias linguagens no mercado.
     
    Concordo com o colega @Rui Guilherme , pois até hoje, mesmo trabalhando nisso há muito tempo, aprendo coisas novas com muita frequência, e pensar assim facilita, pois a humildade sempre nos leva no caminho do aprendizado.
     
    Eu sempre gostei muito de programação, e o fato de gostarmos muito de algo que fazemos ou pretendemos fazer, facilita bastante o estudo.
     
    Sugiro que não estipule prazos: meses ou horas por dia de estudo. Siga sempre em frente lembrando que programar, além de ser um trabalho, é divertido. Pensando assim, creio que quando você menos esperar, já estará dominando bem a linguagem de programação que você deseja aprender.
     
    Abraços e bons estudos.
  11. O post de Marcelo Calazans em Quanto tempo leva para dominar uma linguagem? (C#, JavaScript etc) foi marcado como solução   
    Olá colega.
     
    Trabalho com programação desde a década de 90, e já atuei como programador de várias linguagens no mercado.
     
    Concordo com o colega @Rui Guilherme , pois até hoje, mesmo trabalhando nisso há muito tempo, aprendo coisas novas com muita frequência, e pensar assim facilita, pois a humildade sempre nos leva no caminho do aprendizado.
     
    Eu sempre gostei muito de programação, e o fato de gostarmos muito de algo que fazemos ou pretendemos fazer, facilita bastante o estudo.
     
    Sugiro que não estipule prazos: meses ou horas por dia de estudo. Siga sempre em frente lembrando que programar, além de ser um trabalho, é divertido. Pensando assim, creio que quando você menos esperar, já estará dominando bem a linguagem de programação que você deseja aprender.
     
    Abraços e bons estudos.
  12. O post de Marcelo Calazans em Quanto tempo leva para dominar uma linguagem? (C#, JavaScript etc) foi marcado como solução   
    Olá colega.
     
    Trabalho com programação desde a década de 90, e já atuei como programador de várias linguagens no mercado.
     
    Concordo com o colega @Rui Guilherme , pois até hoje, mesmo trabalhando nisso há muito tempo, aprendo coisas novas com muita frequência, e pensar assim facilita, pois a humildade sempre nos leva no caminho do aprendizado.
     
    Eu sempre gostei muito de programação, e o fato de gostarmos muito de algo que fazemos ou pretendemos fazer, facilita bastante o estudo.
     
    Sugiro que não estipule prazos: meses ou horas por dia de estudo. Siga sempre em frente lembrando que programar, além de ser um trabalho, é divertido. Pensando assim, creio que quando você menos esperar, já estará dominando bem a linguagem de programação que você deseja aprender.
     
    Abraços e bons estudos.
  13. O post de Marcelo Calazans em Alterar ícone pela classe utilizando Javascript foi marcado como solução   
    @EddK
    É fácil usar a ideia do @Adriano_web , mesclar com o seu próprio código sem muitas alterações.
     
    Abaixo tem dois exemplos que foram testados aqui e funcionam:
     
    <!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento sem título</title> </head> <body> <!doctype html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"> <link rel="stylesheet" href="style/main.css"> </head> <body> <header class="header"> <a href="index.html" class="logo-text">xxxxx</a> <button style="display: none;" class="header__btnMenu"> <i id="muda" class="fa fa-bars"></i> <span class="sr-only">Menu</span></button> <nav class="header__nav"> <ul> <li><a href="#">xxxxx</a></li> <li><a href="#">xxxxx</a></li> <li><a href="#">xxxxx</a></li> <li><a href="#">xxxxx</a></li> <li><a href="#">xxxxx</a></li> </ul> </nav> </header> <script src="js/menu.js"></script> </body> </html> <style> body { margin: 0; } .header { background: #fff; width: 100%; } .logo-text { background-color: #333; margin: 0; padding: 20px; display: block; text-decoration: none; color: #fff; float: left; text-align: center; } .header__nav { clear: left; } .header__nav ul { margin: 0; padding: 0; } .header__nav li { list-style-type: none; background: #333; text-align: center; } .header__nav a { text-decoration: none; color: #999; display: block; padding: 25px 0; } .header__nav a:hover { color: #666; } .header__btnMenu { float: right; margin: 1.5em; border: none; } @media screen and (min-width: 1024px) { .logo-text { width: 25%; -webkit-box-sizing: border-box; box-sizing: border-box; } .header__btnMenu { display: none; } .header__nav { float: left; width: 75%; clear: none; max-width: 700px; } .header__nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; } .header__nav li { border-bottom: none; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .header__nav a { background: white; } } </style> <script> (function() { var menu = new Menu({ container: '.header__nav', toggleBtn: '.header__btnMenu', widthEnabled: 1024 }) })() function Menu(config) { this.nav = (typeof config.container === 'string') ? document.querySelector(config.container) : config.container this.btn = (typeof config.toggleBtn === 'string') ? document.querySelector(config.toggleBtn) : config.toggleBtn this.maxWidth = config.widthEnabled || false; var _opened = false; var _this = this; this.btn.removeAttribute('style') if (this.maxWidth) { window.addEventListener('resize', e => { if (window.innerWidth > _this.maxWidth) { _this.nav.removeAttribute('style') _opened = true; } else if (!this.nav.getAttribute('style')) { closeMenu(); } }) if (window.innerWidth <= _this.maxWidth) { closeMenu(); } } this.btn.addEventListener('click', openOrClose) function openOrClose() { if (!_opened) { openMenu() } else { closeMenu() } } function openMenu() { document.getElementById("muda").className = "fa fa-window-close"; var _top = _this.nav.getBoundingClientRect().top + 'px' var _style = { maxHeight: 'calc(100vh - ' + _top + ' )', overflow: 'hidden' } applyStyleToNav(_style) _opened = true; } function applyStyleToNav(_style) { Object.keys(_style).forEach(stl => { _this.nav.style[stl] = _style[stl] }) } function closeMenu() { document.getElementById("muda").className = "fa fa-bars"; var _style = { maxHeight: '0px', overflow: 'hidden' } applyStyleToNav(_style) _opened = false; } } </script> </body> </html>  
    Esse aqui também funciona, e altera menos ainda o seu código: (interagindo direto com o header__btnMenu)
     
    <!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento sem título</title> </head> <body> <!doctype html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"> <link rel="stylesheet" href="style/main.css"> </head> <body> <header class="header"> <a href="index.html" class="logo-text">xxxxx</a> <button style="display: none;" class="header__btnMenu"> <i class="fa fa-bars"></i> <span class="sr-only">Menu</span></button> <nav class="header__nav"> <ul> <li><a href="#">xxxxx</a></li> <li><a href="#">xxxxx</a></li> <li><a href="#">xxxxx</a></li> <li><a href="#">xxxxx</a></li> <li><a href="#">xxxxx</a></li> </ul> </nav> </header> <script src="js/menu.js"></script> </body> </html> <style> body { margin: 0; } .header { background: #fff; width: 100%; } .logo-text { background-color: #333; margin: 0; padding: 20px; display: block; text-decoration: none; color: #fff; float: left; text-align: center; } .header__nav { clear: left; } .header__nav ul { margin: 0; padding: 0; } .header__nav li { list-style-type: none; background: #333; text-align: center; } .header__nav a { text-decoration: none; color: #999; display: block; padding: 25px 0; } .header__nav a:hover { color: #666; } .header__btnMenu { float: right; margin: 1.5em; border: none; } @media screen and (min-width: 1024px) { .logo-text { width: 25%; -webkit-box-sizing: border-box; box-sizing: border-box; } .header__btnMenu { display: none; } .header__nav { float: left; width: 75%; clear: none; max-width: 700px; } .header__nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; } .header__nav li { border-bottom: none; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .header__nav a { background: white; } } </style> <script> (function() { var menu = new Menu({ container: '.header__nav', toggleBtn: '.header__btnMenu', widthEnabled: 1024 }) })() function Menu(config) { this.nav = (typeof config.container === 'string') ? document.querySelector(config.container) : config.container this.btn = (typeof config.toggleBtn === 'string') ? document.querySelector(config.toggleBtn) : config.toggleBtn this.maxWidth = config.widthEnabled || false; var _opened = false; var _this = this; this.btn.removeAttribute('style') if (this.maxWidth) { window.addEventListener('resize', e => { if (window.innerWidth > _this.maxWidth) { _this.nav.removeAttribute('style') _opened = true; } else if (!this.nav.getAttribute('style')) { closeMenu(); } }) if (window.innerWidth <= _this.maxWidth) { closeMenu(); } } this.btn.addEventListener('click', openOrClose) function openOrClose() { if (!_opened) { openMenu() } else { closeMenu() } } function openMenu() { document.querySelector(".header__btnMenu i").className = "fa fa-window-close"; var _top = _this.nav.getBoundingClientRect().top + 'px' var _style = { maxHeight: 'calc(100vh - ' + _top + ' )', overflow: 'hidden' } applyStyleToNav(_style) _opened = true; } function applyStyleToNav(_style) { Object.keys(_style).forEach(stl => { _this.nav.style[stl] = _style[stl] }) } function closeMenu() { document.querySelector(".header__btnMenu i").className = "fa fa-bars"; var _style = { maxHeight: '0px', overflow: 'hidden' } applyStyleToNav(_style) _opened = false; } } </script> </body> </html>  
     Abraços colega.
  14. O post de Marcelo Calazans em Como adiciono imagens ao meu site? foi marcado como solução   
    Olá colega.
     
    Vou te dar dois exemplos práticos.
     
    Um com uma foto já hospedada, parecido com aquilo que você mostrou:
     
    <!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento sem título</title> </head> <body> <img src="https://ik.imagekit.io/vu1pwgp5n/default-image.jpg" alt="teste" /> </body> </html>  
    Mas note que neste exemplo, a foto precisa existir no caminho. Se você colocar ela no navegador, a foto deve abrir. No seu caso, a sua aqui não abriu.
     
    Outra forma, é colocar a foto direto no caminho, conforme abaixo:
     
    <!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento sem título</title> </head> <body> <img src="fashion-6146328_1920.jpg" alt="teste" /> </body> </html>  
    Mas note também, que a imagem deve estar no caminho correto, e neste caso, na mesma pasta onde estiver a chamada no código.
     
    Abraços.
  15. O post de Marcelo Calazans em Calcular tempo de um evento foi marcado como solução   
    @zMarlon
    Olá colega.
     
    No seu código, nos testes que eu fiz, sempre que a hora final (término) é menor que a hora inicial, o seu código não funciona.
     
    O ideal neste tipo de cálculo com tempo, é trabalhar com o tempo todo junto, e não separado como sugere o enunciado do exercício.
     
    Veja abaixo uma ideia de cálculo com tempo, usando o Date Object, que pode ser visto na referência https://www.w3schools.com/js/js_dates.asp
     
    <!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento sem título</title> </head> <body> <script> var data1 = new Date(2021,2,01,8,30,5); /* Seria 01/02/2021 às 08:30:05 */ var data2 = new Date(2021,3,01,8,30,10); /* Seria 01/03/2021 às 08:30:10 */ var diffMs = (data2 - data1); var diffDia = Math.floor(diffMs / 86400000); var diffHrs = Math.floor((diffMs % 86400000) / 3600000); var diffMin = Math.round(((diffMs % 86400000) % 3600000) / 60000); var diffSec = Math.floor((diffMs/1000) % 60); alert(diffDia + " dias, " + diffHrs + " horas, " + diffMin + " minutos " + diffSec + " segundos"); </script> </body> </html>  
    Eu sei que este seu código é um exercício, mas profissionalmente, quando se tem a ideia de pedir o dia do mês, já se tem a ideia de pedir o mês e o ano, pois eles se complementam.
     
    Dizer que é dia 25, e não dizer de qual mês e de qual ano, não significa nada na verdade.
     
    Sei que isto não é sua culpa, mas sim do enunciado do exercício na minha opinião.
     
    Veja se consegue inserir no seu exemplo o uso do Date Object, ou aguarde para ver se algum outro colega tem uma sugestão para seu código sem o uso do Date Object.
     
    Espero ter ajudado em algo.
     
    Abraços e bons estudos colega.
  16. O post de Marcelo Calazans em Somar input no navegador usando Javascript foi marcado como solução   
    @navegador2
    Compreendo, vamos lá então:
     
    O seu também estava correto, no seu modelo eu acho que o problema foi um erro de digitação, segue abaixo o seu funcionando:
     
    <!DOCTYPE html> <html lang="pt-Br"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Teste JavaScript</title> </head> <body> <fieldset> <legend>Soma dos Números</legend> <label>Primeiro Valor:</label> <input id="numero1" type="text"> </br> <label>Segundo Valor: </label> <input id ="numero2"type="text"> </br> <button id="somar" onclick="somarvalores()">SOMAR</button> </fieldset> <script> function somarvalores() { var num1 = document.getElementById("numero1").value; var num2 = document.getElementById("numero2").value; var soma = parseInt(num1) + parseInt(num2); window.alert(soma); } </script> </body> </html>  
    A única coisa que eu alterei.
     
    Troquei isso:
    var num2 = documento.getElementById("numero2").value; Por isso:
    var num2 = document.getElementById("numero2").value;  
    Teste para ver, está funcionando agora.
     
    Abraços.
  17. O post de Marcelo Calazans em como colocar divs uma ao lado da outra, html e css js. foi marcado como solução   
    @M.tech O float talvez não seja muito indicado para fazer o que você quer com os botões, no seu caso, o mais indicado mesmo é o display: inline-block;

    Abaixo tem um exemplo de duas divs com float para você ver:
     
    <!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento sem título</title> </head> <body> <style> .div_um { float: left; } .div_dois {float: right; } .texto { clear: both; } </style> <div class="div_um"> <p>(UM)</p> </div> <div class="div_dois"> <p>(DOIS)</p> </div> <div class="texto"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </body> </html>  
     Abraços.
  18. O post de Marcelo Calazans em Esta tudo certo, só nao esta enviando pro banco de dados. foi marcado como solução   
    @jennife rqueres Mas você consegue então acessar o phpmyadmin, mas ao acessar, está tudo em branco porque o código não gravou nada. Se for isso, tenta trocar por essa linha abaixo:
     
     
  19. O post de Marcelo Calazans em mysqli_num_rows() expects parameter 1 to be mysqli_result, bool given foi marcado como solução   
    @jennife rqueres Já verificou se o conteúdo da variável $query não é false ou null? Esse erro é típico disso.
     
    Vendo a linha: $query = mysqli_query($conecta,"SELECT * FROM 'tb_cliente' WHERE email='$email'");, o problema pode estar na variável $conecta, que está vindo provavelmente de antes deste código, na include 'conecta.php';
     
    Abaixo tem um resumo de como funciona a mysqli_query:
    http://www.w3bai.com/pt/php/func_mysqli_query.html
     
    Boa sorte colega.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Como ganhar dinheiro montando computadores!

MINICURSO GRÁTIS!

Como ganhar dinheiro montando computadores!

CLIQUE AQUI E INSCREVA-SE AGORA MESMO!