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 dayenne
      Olá desenvolvedor.
      Estou com um problema um tanto quanto bobo, porém não consigo resolver!!! Estou gerando um e-mail automático com html onde nele contém um vídeo, a pagina fica toda certinha, porém quando esse e-mail chega ao remetente,ele chega sem a parte do vídeo, onde tem o iframe e afins.
       
       
       
      Código da parte que NÃO vai para o e-mail.
       
      <div style="margin:0; padding:15px 50px 15px 50px; font-family: Arial, Helvetica, sans-serif; color:#8f8871; font-size:18px; line-height:16px; background-color:#FFF; border-top: 1px dashed #ccc" text-align:"center"> <strong>Não tenha dúvidas! Aperta o play e veja como é fácil montar o seu álbum.</strong><span style="padding-left:10px;"> </span> <br> <br> <iframe width="100%" height="315" src="https://www.youtube.com/embed/_wPfz-w2XDo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture background-color: #fff;" allowfullscreen> </iframe> </div>  
    • Por clickanapolis
      Bom dia, no meu site coloquei ao clicar no link ele vai para uma div dentro da propria pagina, visto que a mesma e uma unica pagina.
       
      O problema é que quando clica no link ele esta parando fora do inicio da div, o que devo fazer?
       
      <script type="text/javascript"> jQuery(document).ready(function ($) { $(".scroll").click(function (event) { event.preventDefault(); $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1000); }); }); </script> e chamo o link assim:
       
      <li><a href="#acimetech" class="scroll">A Cimetech</a></li>  
    • Por Kelven
      Galera to enfrentando um problema, no meu tumblr to querendo colocar o popup de newsletter do Mailchimp, até ai tudo bem, é pra funcionar que nem no script abaixo, porém esse script só funciona se eu excluir aquela parte que está marcada, porém se eu excluir ela o tema do tumblr não funciona como deveria em celulares. Alguém sabe me dizer que tipo de conflito é esse e como posso resolver???
      <script type='text/javascript' src='http://space.fitterbiz.com/wp-includes/js/wp-embed.min.js?ver=4.9.10'></script> <script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script> <script> function showMailingPopUp() { require( ["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us14.list-manage.com","uuid":"7f359a9e538573b27c9e39820","lid":"e64535f817"}) } ); document.cookie = 'MCPopupClosed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;'; document.cookie = 'MCPopupSubscribed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;'; } document.getElementById("open-popup").onclick = function() {showMailingPopUp()}; </script> <a onclick="showMailingPopUp(); return false;" id="open-popup" style="cursor:pointer">Subscribe!</a> <!-- quando coloco isso não funciona --> <script src="https://static.tumblr.com/xlsgtjb/mt5o305mz/scripts.min.js" charset="UTF-8"></script> <!-- quando coloco isso não funciona -->
×

Informação importante

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