Ir para conteúdo
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.

  • +1 1

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?

  • +1 1

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! 

  • +1 1

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?

  • +1 1

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.

  • +1 1

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.

  • +1 1

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

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por _badi_
      Preciso de ajuda! Pode parecer uma dúvida besta, mas sou nova nessa área e não estou conseguindo resolver essa questão da facul!
      A questão é:
      1)      Faça o fluxograma e depois faça o código em Javascript de um programa  que lê  3 notas obtidas por um aluno e depois calcule  e imprima a média dos para avaliação, usando  a fórmula abaixo. Imprimir depois o conceito, conforme a tabela abaixo. Use o prompt no javascript e um botão que mostre a média e o conceito depois que do clique no mesmo.
      MA = (Nota1 + Nota2 x 2 + Nota3 x 3 + ME )/7
      Média de Aproveitamento
      Conceito
      10
      A
      7,5 e < 10
      B
      4,0 e < 7,5
      C
      < 4,0
      D
       
      Meu código ficou assim:
      <!DOCTYPE html> <html> <head>      </head> <body> Para calcular sua media e saber seu conceito, clique no botao abaixo: <br> <br> <button onclick='mostra()'>Try it</button> <p id="resp"></p> <br> <br> <script>     function mostra(){         var nota1 = prompt ("Digite a nota 1");         var resp1 = parseInt (nota1);         var nota2 = prompt ("Digite a nota 2");         var resp2 = parseInt (nota2);         var nota3 = prompt ("Digite a nota 3");         var resp3 = parseInt (nota3);         var ME = (resp1 + resp2 + resp3)/3;         var MA = resp1 + (resp2 * 2) + (resp3 * 3) + ME/7;         if (MA=10) {             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi A!");         } else if (MA=7.5&&MA<10){             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi B!");         } else if (MA=4&&MA<7.5){             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi C!");         } else if (MA<4){             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi D!");         }         }          </script> </body> </html>  
      Mas sempre volta como conceito A, não importa os valores que coloco :(
      Obrigado!
       
    • Por Eduardo S. B. de Oliveira
      Senhores, preciso de uma ajuda, estou criando um formulário onde o checkbox fique "checked" quando clicar em cima, mas o detalhe e que quando atualizar a pagina o checkbox permaneça marcado. É possível? 
    • Por alh
      Estou seguindo as especificações corretamente do git. https://github.com/opencartbrasil/opencart-rest-api/blob/master/README.md
      Estou tendo o erro ao acessar minha página de integração:
      ERRO: Not found (entity)
      Ao acessar minha página que contém o seguinte código: categorias.php
       
      No arquivo abaixo estou colocando a minha KEY e domínio correto.
      <?php $headers = array(); $headers[] = 'Content-Type: application/json'; $headers[] = 'key: MINHAKEY'; // // Replace key value for API key OpenCart (Only numbers and letters) $ch = curl_init(); curl_setopt_array($ch, [ CURLOPT_URL => 'http://www.NOMEDOMEUDOMINIO.com.br/api.php/categories', // Replace domain and table name CURLOPT_HTTPHEADER => $headers, CURLOPT_CUSTOMREQUEST => 'GET', CURLOPT_RETURNTRANSFER => true, CURLOPT_SSL_VERIFYHOST => false, CURLOPT_SSL_VERIFYPEER => false ]); $out = curl_exec($ch); curl_close($ch); print_r( $out ); // Result json ?>
    • Por joaon77@yahoo.com.br
      Olá pessoal!
      Criei um menu usando listas não ordenadas (ul, li) com as imagens dispostas horizontalmente. São quatro imagens. O problema é que uma das imagens aparece duplicada no layout. Não entendi. Segue o código:
      ... <span class="menuRedesSociais"> <ul> <li id="img1"><a href="#"</a></li> <li id="img2"><a href="#"></a></li> <li id="img3"><a href="#"></a></li> <li id="img4"><a href="#"></a></li> </ul> </span> span ul { margin: 0; padding: 0; } span li { list-style: none; display: inline-block; } span a:link, a:visited { padding: 15px; } li#img1 a{ background-image: url("#img1"); background-repeat: no-repeat; } li#img2 a{ background-image: url("#img2"); background-repeat: no-repeat; } li#img3 a{ background-image: url("#img3"); background-repeat: no-repeat; } li#img4 a{ background-image: url("#img4"); background-repeat: no-repeat; } A imagem que aparece duplicada é a img2. Obs. Já fiz o teste trocando a posição das imagens, só que o problema continua.
       
      Agradeço muito se alguém puder me ajudar.
       
×

Informação importante

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