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 JGD
      Supondo que tenho um input name = dataHoraINI...
      Este input tem o  valor/value =  21/03/2019 09:00 
      Chamo a função abaixo pelo <button...:
       
      <button class="btn btn-primary" onclick="popdataJGD('dataHoraINI','pop1',document.getElementById('dataHoraINI').value)"> <i class="glyphicon glyphicon-calendar"></i> </button>  
      São 03 parâmetros: popdataJGD(objeto, div, value).. Sendo o 3º: data + hora.
       
      Observar que passo para a função o 3º parâmentro assim: document.getElementById('dataHoraINI').value
      Como poderia passar este 3º paramentro como string e inline a data e hora ???
       
      Qual diferença entre: 
      document.getElementById('dataHoraINI').value E
      this.value E/Ou ainda.
      var data_hora = "21/03/2019 09:00" Neste caso : popdataJGD(objeto, div, data_hora)... Observar no code acima a questão das aspas simples.
       
      Agradeço qualquer ajuda conceitual
       
    • Por Ruy Hoffmann
      Olá pessoal, boa tarde,
       
      Eu fiz um site, comprarei o domínio e hospedagem provavelmente ainda hoje (alguma sugestão de um bom provedor de domínios?) e já estou providenciando para que o site ficar no ar. Até ai tudo bem. Esse será um site comercial, então fiz as meta tags para melhorar nas buscas, to pesquisando sobre SEO, etc...
       
      Mas em pararelo fiz um OUTRO site completo também, que vai do index até diversas outras páginas, é um módulo administrativo financeiro que só terá acesso por mim e pela minha esposa. Estou pensando em colocar o acesso no mesmo domínio do site acima, algo do tipo a url do site comercial /admin/a_console.php (que é onde eu e minha esposa efetuaremos nosso login).
       
      Minha pergunta é: para este SEGUNDO SITE que vai trabalhar independente do primeiro eu não quero que as páginas dele apareçam nas buscas, nada, nadinha... Como faço isso? Seria algo do tipo uma INTRANET, onde é acessível pela internet, mas só aparece para quem tem a url da página de login. Alguém sabe como faço para NÃO aparecer?
       
      Obrigado,
       
    • Por Guga Alves
      Olá, estou enfrentando um problema no qual não tinha tido contato até então.

      Alguns textos em uma landing que estou trabalhando simplesmente não exibidos ou apresentam erros na exibição.

      Gostaria de saber se alguém já enfrentado esse problema poderia me ajudar com isso.

      Abaixo segue imagens dos erros
       
       
       


    • Por Incompetech
      Olá a todos. Então.. eu estava praticando um pouco de HTML / CSS e no fim cheguei a um resultado bem legal e simples claro disto aqui:
       
      Eu sei que alguns vão reconhecer isto.. Mas para quem não conhece é algo relacionado ao game MU ONLINE.
      Enfim. Como podem ver eu inventei alguns adicionais que no caso são as características dessa armadura, porém eu gostaria de aplicar um efeito em que esses adicionais apareçam quando eu passar o mouse por cima da imagem da armadura.. como se fosse dentro do game.
      Abaixo vão alguns exemplos:
      Efeito aplicado em um projeto HTML: 

      O mesmo efeito In Game:
       
      Sei que pode parecer algo meio trivial mas gostaria muito de aprender como eu faço para criar algo igual, se puderem me ajudar eu agradeço de coração.
×

Informação importante

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