Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

DD_Dev

Dúvidas sobre desenvolvimento web

Recommended Posts

Estudo programação desktop há algum tempo C/C++ e python, mas agora estou começando a me aventurar em desenvolvimento web (front-end), sei o básico de Html5, mas tenho um pouco de dificuldade em desenvolver as ideias, gostaria de saber métodos para praticar, como colocar toda essa carga teórica estudada em pratica? Replicação de sites é uma boa?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara, eu sei o básico de HTML5 e CSS3 também e estou estudando por conta própria e meu jeito de praticar é replicando sites que eu conheço. Acho que é uma boa forma de aprendizagem e eu só conheço essa forma de praticar, mas eu nunca pesquisei outras formas de aprender aquilo que aprendi, então fica a seu critério.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sei que você já tem um conhecimento básico em html5, mas tem um curso no youtube que se chama curso em video. Não sei se você já fez o curso de html5 lá, porém ele te dá uma boa noção de por onde você pode começar, o curso é basico, entretanto, lá você aprende a construir sites simples passo a passo e depois você vai aprimorando. É normal ter dificuldade em desenvolver um site, principalmente, quando a pessoa está começando com a trabalhar com desenvolvimento web.

Compartilhar este post


Link para o post
Compartilhar em outros sites
Agora, luiz14 disse:

Sei que você já tem um conhecimento básico em html5, mas tem um curso no youtube que se chama curso em video. Não sei se você já fez o curso de html5 lá, porém ele te dá uma boa noção de por onde você pode começar, o curso é basico, entretanto, lá você aprende a construir sites simples passo a passo e depois você vai aprimorando. É normal ter dificuldade em desenvolver um site, principalmente, quando a pessoa está começando com a trabalhar com desenvolvimento web.

Sim, eu fiz o curso básico lá :D E agora estou estudando por conta própria buscando mais comandos. Até agora não consegui sanar uma dúvida que eu tenho aqui. Enfim... vou conseguir, acredito nisso hehe

Compartilhar este post


Link para o post
Compartilhar em outros sites
1 minuto atrás, Kimo Gordinho disse:

Sim, eu fiz o curso básico lá :D E agora estou estudando por conta própria buscando mais comandos. Até agora não consegui sanar uma dúvida que eu tenho aqui. Enfim... vou conseguir, acredito nisso hehe

 

Qual a dúvida?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Em vez de explicar o que quero, vou te dar um exemplo do que quero fazer, melhor! Vou te dar o exemplo que estou tentando replicar.

No site do jogo Cross Fire AL, o menu lá é drop down e o submenu tem um atraso pra desaparecer. Dá uma olhada lá.
Esse efeito eu não estou conseguindo replicar hehe

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu já dei uma olhada no curso em vídeo, é bem interessante, mas nunca cheguei a concluir um curso lá. Eu estudo informática em uma escola técnica, lá o desenvolvimento web é bem mais voltado para o lado back-end (PHP). Então minha maior dúvida é nessa parte de colocar em pratica o HTML5. Mas mesmo assim valeu pelas dicas, vou começar a replicar alguns sites e tentar buscar novos métodos! 

Compartilhar este post


Link para o post
Compartilhar em outros sites
7 minutos atrás, Kimo Gordinho disse:

Em vez de explicar o que quero, vou te dar um exemplo do que quero fazer, melhor! Vou te dar o exemplo que estou tentando replicar.

No site do jogo Cross Fire AL, o menu lá é drop down e o submenu tem um atraso pra desaparecer. Dá uma olhada lá.
Esse efeito eu não estou conseguindo replicar hehe

 

Já tentou utilizar o transition do css pra fazer isso?

Compartilhar este post


Link para o post
Compartilhar em outros sites
Agora, luiz14 disse:

 

Já tentou utilizar o transition do css pra fazer isso?

Sim e não está funcionando. Já tentei também o transition-delay e não obtive êxito.

3 minutos atrás, DD_Dev disse:

Eu já dei uma olhada no curso em vídeo, é bem interessante, mas nunca cheguei a concluir um curso lá. Eu estudo informática em uma escola técnica, lá o desenvolvimento web é bem mais voltado para o lado back-end (PHP). Então minha maior dúvida é nessa parte de colocar em pratica o HTML5. Mas mesmo assim valeu pelas dicas, vou começar a replicar alguns sites e tentar buscar novos métodos! 

Os cursos lá são voltados para aqueles que não sabem nada de programação, são para pessoas que estão começando, que estão perdidas, que não sabem dar o primeiro passo mas lá, tem um curso de PHP e um curso de PHP Orientado à Objetos. Se quiser dá uma olhada lá ;) os cursos são de uma qualidade extrema!

Compartilhar este post


Link para o post
Compartilhar em outros sites
15 minutos atrás, DD_Dev disse:

Eu já dei uma olhada no curso em vídeo, é bem interessante, mas nunca cheguei a concluir um curso lá. Eu estudo informática em uma escola técnica, lá o desenvolvimento web é bem mais voltado para o lado back-end (PHP). Então minha maior dúvida é nessa parte de colocar em pratica o HTML5. Mas mesmo assim valeu pelas dicas, vou começar a replicar alguns sites e tentar buscar novos métodos! 

 

Boa sorte! 

13 minutos atrás, Kimo Gordinho disse:

Sim e não está funcionando. Já tentei também o transition-delay e não obtive êxito.

Estranho, eu normalmente utilizo o transition para fazer essas coisas.

Compartilhar este post


Link para o post
Compartilhar em outros sites
2 minutos atrás, luiz14 disse:

 

Boa sorte! 

Estranho, eu normalmente utilizo o transition para fazer essas coisas.

Sim. Eu também mas.... Quer o código pra tu dá uma olhada ?

Compartilhar este post


Link para o post
Compartilhar em outros sites
Agora, Kimo Gordinho disse:

Sim. Eu também mas.... Quer o código pra tu dá uma olhada ?

 

Sim, talvez eu possa ajudar.

Compartilhar este post


Link para o post
Compartilhar em outros sites

tomará que vá agora

@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Agency FB", "Aharoni", "Algerian", "Andalus", "Angsana New", "AngsanaUPC", "Aparajita", "Arabic Typesetting", "Arial", "Arial Black", "Arial Narrow", "Arial Rounded MT Bold",sans-serif;
    font-size: 20px;
}

nav#menu {
    list-style: none;
    border: 2px solid cadetblue;
    position: absolute;
    left: 23%;
    top: 5%;
    width: 750px;
}

nav#menu li {
    position: relative;
    float: left;
    border-right: 50px solid white;
}

nav#menu li a {
    color: #333;
    padding: 5px 10px;
    display: block;
    text-decoration: none;
}

nav#menu li a:hover {
    background: #333;
    color: #fff;
    text-shadow: 0 0 5px #fff;
}

nav#menu li ul {
    position: absolute;
    top: 110%;
    left: 0;
    background-color: #fff;
    display: none;
}

nav#menu li:hover ul, #menu li.over ul {
    display: block;
}

nav#menu li ul li {
    border: 0;
    display: block;
    width: 150px;
}

 

agora em HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>CROSSFIRE Ideal</title>
    <link rel="stylesheet" type="text/css" href="_css/início.css">
</head>
<body>
    <nav id="menu">
        <ul type="none">
            <li><a href="">NOTÍCIAS</a>
                <ul>
                    <li><a href="_html/notícias.html">NOTÍCIAS</a></li>
                    <li><a href="_html/atualizações.html">ATUALIZAÇÕES</a></li>
                    <li><a href="_html/eventos.html">EVENTOS</a></li>
                    <li><a href="_html/feeds.html">FEEDS</a></li>
                </ul>
            </li>
            <li><a href="">JOGO</a>
                <ul>
                    <li><a href="_html/visão-geral.html">VISÃO GERAL</a></li>
                    <li><a href="_html/começando-o-jogo.html">COMEÇANDO O JOGO</a></li>
                    <li><a href="_html/modos.html">MODOS</a></li>
                    <li><a href="_html/soldados.html">SOLDADOS</a></li>
                    <li><a href="_html/arsenal.html">ARSENAL</a></li>
                    <li><a href="_html/patentes.html">PATENTES</a></li>
                    <li><a href="_html/download.html">DOWNLOAD</a></li>
                </ul>
            </li>
            <li><a href="_html/mídia.html">MÍDIA</a></li>
            <li><a href="início.html">CROSSFIRE Ideal</a></li>
            <li><a href="">RANKING</a>
                <ul>
                    <li><a href="_html/soldados.html">SOLDADOS</a></li>
                    <li><a href="_html/clãs.html">CLÃS</a></li>
                </ul>
            </li>
            <li><a href="">FÓRUM</a>
                <ul>
                    <li><a href="_html/fórum.html">FÓRUM</a></li>
                    <li><a href="_html/lista-negra.html">LISTA NEGRA</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara, eu acho que a principal diferença entre desenvolvimento desktop e web é entender profundamente o conceito da web:

navegador - [nuvenzinha da internet] - servidor

 

Diferente do desktop, onde você tem todos os recursos a sua disposição, na internet você tem que entender que tudo que você fizer no servidor vai virar um HTML/JS/CSS, que são as unica coisas que o navegador entende, e quando você envia a página para o cliente, ele não terá acesso aos dados do servidor.

 

Isso na minha opinião é o mais importante:

navegador - [nuvenzinha da internet] - servidor

Qualquer coisa que você fizer, por mais absurdamente legal que seja, e olha que eu já fiz muita coisa legal, no final vai virar um HTML/JS/CSS.

 

E olhar isso também:

navegador - [nuvenzinha da internet] - servidor

 

Isso é para qualquer linguagem, C#, PHP, JAVA, Ruby, Go, etc, sempre vai ter a "navegador - [nuvenzinha da internet] - servidor" e HTML/JS/CSS no final.

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 24/07/2017 at 14:11, Kimo Gordinho disse:

tomará que vá agora


@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Agency FB", "Aharoni", "Algerian", "Andalus", "Angsana New", "AngsanaUPC", "Aparajita", "Arabic Typesetting", "Arial", "Arial Black", "Arial Narrow", "Arial Rounded MT Bold",sans-serif;
    font-size: 20px;
}

nav#menu {
    list-style: none;
    border: 2px solid cadetblue;
    position: absolute;
    left: 23%;
    top: 5%;
    width: 750px;
}

nav#menu li {
    position: relative;
    float: left;
    border-right: 50px solid white;
}

nav#menu li a {
    color: #333;
    padding: 5px 10px;
    display: block;
    text-decoration: none;
}

nav#menu li a:hover {
    background: #333;
    color: #fff;
    text-shadow: 0 0 5px #fff;
}

nav#menu li ul {
    position: absolute;
    top: 110%;
    left: 0;
    background-color: #fff;
    display: none;
}

nav#menu li:hover ul, #menu li.over ul {
    display: block;
}

nav#menu li ul li {
    border: 0;
    display: block;
    width: 150px;
}

 

agora em HTML


<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>CROSSFIRE Ideal</title>
    <link rel="stylesheet" type="text/css" href="_css/início.css">
</head>
<body>
    <nav id="menu">
        <ul type="none">
            <li><a href="">NOTÍCIAS</a>
                <ul>
                    <li><a href="_html/notícias.html">NOTÍCIAS</a></li>
                    <li><a href="_html/atualizações.html">ATUALIZAÇÕES</a></li>
                    <li><a href="_html/eventos.html">EVENTOS</a></li>
                    <li><a href="_html/feeds.html">FEEDS</a></li>
                </ul>
            </li>
            <li><a href="">JOGO</a>
                <ul>
                    <li><a href="_html/visão-geral.html">VISÃO GERAL</a></li>
                    <li><a href="_html/começando-o-jogo.html">COMEÇANDO O JOGO</a></li>
                    <li><a href="_html/modos.html">MODOS</a></li>
                    <li><a href="_html/soldados.html">SOLDADOS</a></li>
                    <li><a href="_html/arsenal.html">ARSENAL</a></li>
                    <li><a href="_html/patentes.html">PATENTES</a></li>
                    <li><a href="_html/download.html">DOWNLOAD</a></li>
                </ul>
            </li>
            <li><a href="_html/mídia.html">MÍDIA</a></li>
            <li><a href="início.html">CROSSFIRE Ideal</a></li>
            <li><a href="">RANKING</a>
                <ul>
                    <li><a href="_html/soldados.html">SOLDADOS</a></li>
                    <li><a href="_html/clãs.html">CLÃS</a></li>
                </ul>
            </li>
            <li><a href="">FÓRUM</a>
                <ul>
                    <li><a href="_html/fórum.html">FÓRUM</a></li>
                    <li><a href="_html/lista-negra.html">LISTA NEGRA</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</body>
</html>

 

Não estava conseguindo enviar mensagem desde ontem, mas agora parece que normalizou. Você sabe trabalhar com Jquery? Você pode utilizar o show() ou fadein() para para regular a velocidade que o submenu vai aparecer e o hide() ou fadeout() para regular a velocidade que o submenu desaparece, mas pelo que percebi o seu problema é que, as vezes, antes de conseguir chegar aos submenus, eles desaparecem, certo? Parece que tem um espaço vago entre o menu e os submenus que faz isso acontecer, esse é o seu problema?

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por violin101
      Caros amigos, saudações.

      Estou com uma pequena dúvida se é possível ser realizado.

      Preciso passar 2 IDs para o Sistema executar a função, estou utilizando desta forma e gostaria de saber como faço via JS para passar os parâmetro que preciso.

      Observação:
      Dentro da TABELA utilizei 2 Forms, para passar os IDS que preciso, funcionou conforme código abaixo.
      <div class="card-body"> <table id="tab_clie" class="table table-bordered table-hover"> <thead> <tr> <th style="text-align:center; width:10%;">Pedido Nº</th> <th style="text-align:center; width:10%;">Data Pedido</th> <th style="text-align:center; width:32%;">Fornecedor</th> <th style="text-align:center; width:10%;">Status</th> <th style="text-align:center; width:5%;">Ação</th> </tr> </thead> <tbody> <?php foreach ($results as $r) { $dta_ped = date(('d/m/Y'), strtotime($r->dataPedido)); switch ($r->pd_status) { case '1': $status = '&nbsp;&nbsp;Aberto&nbsp;&nbsp;'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#000000'; //Cor: Preta break; case '2': $status = 'Atendido Total'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#086108'; //Cor: Verde break; case '3': $status = 'Atendido Parcial'; $txt = '#000000'; //Cor: Branco $cor = '#FEA118'; //Cor: Amarelo break; default: $status = 'Cancelado'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#D20101'; //Cor: Vermelho break; } echo '<tr>'; echo '<td width="10%" height="10" style="text-align:center;">'.$r->pd_numero.'</td>'; echo '<td width="10%" height="10" style="text-align:center;">'.$dta_ped.'</td>'; echo '<td width="32%" height="10" style="text-align:left;">'.$r->nome.'</td>'; echo '<td width="10%" height="10" style="text-align:left;"><span class="badge" style="color:'.$txt.'; background-color:'.$cor.'; border-color:'.$cor.'">'.$status.'</span></td>'; echo '<td width="5%" style="text-align:center;">'; ?> <div class="row"> <?php if($this->permission->checkPermission($this->session->userdata('permissao'), 'vPedido')){ ?> <form action="<?= base_url() ?>compras/pedidos/visualizar" method="POST" > <input type="hidden" name="idPedido" value="<?php echo $r->idPedidos; ?>"> <input type="hidden" name="nrPedido" value="<?php echo $r->pd_numero; ?>"> <button class="btn btn-warning" title="Visualizar" style="margin-left:50%; padding: 1px 3px;"><i class="fa fa-search icon-white"></i></button> </form> <?php } if($this->permission->checkPermission($this->session->userdata('permissao'), 'ePedido')){ ?> <form action="<?= base_url() ?>compras/pedidos/editar" method="POST" > <input type="hidden" name="idPedido" value="<?php echo $r->idPedidos; ?>"> <input type="hidden" name="nrPedido" value="<?php echo $r->pd_numero; ?>"> <button class="btn btn-primary" title="Editar" style="margin-left:50%; padding: 1px 3px;"><i class="fa fa-edit icon-white"></i></button> </form> <?php } ?> </div> <?php echo '</td>'; echo '</tr>'; } ?> </tbody> </table> </div>
      Grato,

      Cesar.
    • Por belann
      Olá!
       
      Estou usando o editor quill em uma página html, sem fazer a instalação com npm, mas usando as api´s via internet com http, no entanto não consigo fazer a tecla enter funcionar para mudança de linha, tentei essa configuração abaixo, mas não funcionou.
       
      modules: {       syntax: true,       toolbar: '#toolbar-container',       keyboard: {         bindings: {           enter: {             key: 13,             handler: function(range, context) {                       quill.formatLine(range.index, range.length, { 'align': '' });             }           }  
       
    • Por violin101
      Caros amigos, saudações.
       
      Gostaria de poder tirar uma dúvida com os amigos.
       
      Como faço uma função para Comparar a Data Digitada pelo o Usuário com a Data Atual ?

      Data Digitada:  01/09/2024
       
      Exemplo:
      25/09/2024 é menor que DATA Atual  ====> mensagem: informe uma data válida.
      25/09/2024 é igual DATA Atual ===> o sistema libera os INPUT's.
       
      Como faço uma comparação com a Data Atual, para não Deixar Gravar Data retroativa a data Atual.
       
      Grato,
       
      Cesar
    • Por Rafael Castelhano
      Olá, quero preencher um dict dinamicamente onde a chave é uma string multidimencional no dict, ex:
      var dict = {} var path = 'a.b.c' dict[path] = 55 // isso faz dict ficar desta forma {'a.b.c': 55} // mais quero que fique assim {a: {b: {c: 55}}} Como consigo alterar desta forma? 
    • Por violin101
      Caros amigos, saudações.
       
      Estou com um problema de cálculo que não estou conseguindo resolver.
       
      Tenho uma rotina em Javascript que faz o seguinte cálculo qtde x vrUnit = total.
       
      qtde   x  vrUnit    =    total
      1,23   x  1,00       =    1,23    << até aqui tudo bem.
       
      o problema seria fazer o arredondamento para cima para impedir de fazer este cálculo:
      0,01 x 0,01 = 0,0001
       
      para digitar o valor estou utilizando esta função:
       
      /*Esta função quando o usuário digitar o valor aparece * 1,23 */ function formataDigitacao(i) { //Adiciona os dados para a másrcara var decimais = 2; var separador_milhar = '.'; var separador_decimal = ','; var decimais_ele = Math.pow(10, decimais); var thousand_separator = '$1'+separador_milhar; var v = i.value.replace(/\D/g,''); v = (v/decimais_ele).toFixed(decimais) + ''; var splits = v.split("."); var p_parte = splits[0].toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, thousand_separator); (typeof splits[1] === "undefined") ? i.value = p_parte : i.value = p_parte+separador_decimal+splits[1]; } /*Esta função faz a multiplicação entre Valor Unitário X Quantidade *faz a multiplicação correta */ function calcProd(){ //Obter valor digitado do produto var prod_qtde = document.getElementById("qtde").value; //Remover ponto e trocar a virgula por ponto while (prod_qtde.indexOf(".") >= 0) { prod_qtde = prod_qtde.replace(".", ""); } prod_qtde = prod_qtde.replace(",","."); //Obter valor digitado do produto var valor_unit = document.getElementById("vlrunit").value; //Remover ponto e trocar a virgula por ponto while (valor_unit.indexOf(".") >= 0) { valor_unit = valor_unit.replace(".", ""); } valor_unit = valor_unit.replace(",","."); //Calcula o Valor do Desconto if (valor_unit > 0 && prod_qtde > 0) { calc_total_produto = (parseFloat(valor_unit) * parseFloat(prod_qtde)); var numero = calc_total_produto.toFixed(2).split('.'); //<<== aqui faço o arredondamento das casas decimais de 1,234 p/ 1,23 numero[0] = numero[0].split(/(?=(?:...)*$)/).join('.'); document.getElementById("vlrtotal").value = numero.join(','); } else { if (valor_unit > 0) { document.getElementById("vlrtotal").value = document.getElementById("vlrunit").value; } else { document.getElementById("vlrtotal").value = "0,00"; } } } Grato,
       
      Cesar
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.