Jump to content

keven1406

Members
  • Content count

    27
  • Joined

  • Last visited

Everything posted by keven1406

  1. keven1406

    A semântica dessa lista está correta?

    Obrigado por comentar. Sim, pensei em colocar um footer ai, mas fiquei imaginando como se encaixaria no design, se no mesmo não há footer. Acho que da forma que fiz está semanticamente errado, porque coloquei o footer com as redes sociais dentro da section, tornando um footer da section. Acho que só pra conter o footer da forma correta, seria melhor que eu colocasse ele normal, mas com o CSS deixasse ele no formato a complementar a section superior, ficando com o mesmo formato que agente vê na foto. Não sei se é obrigatório ter footer na página, estou pesquisando aqui. Pelo que você viu do código, tem alguma coisa fora o footer que eu possa melhorar em questão de semântica?
  2. Minha duvida é se a semântica está legal, e se fiz certo na segunda section do miolo do site. A section que me refiro é a com a class = "section-contato". Lá tem o endereço da empresa, o numero e email. Como no design não pode ter isso: Endereço: Tralálálálá, e sim uma imagem e do lado da imagem o endereço. A mesma coisa com o e-mail e o telefone. Vou mandar a photo do design que estou estudando e também o código. Em questão da imagem e design já está tudo certo. Meu problema só é se fiz certo semanticamente ao colocar no <li> o <h3>Address</h3> e depois o paragrafo com o conteúdo para indicar que aquele parágrafo refere-se ao endereço e assim por diante. Vou colocar só o HTML já que não estou precisando de ajuda com o CSS. <!DOCTYPE html> <html lang = "pt-br"> <head> <title>Contact Us</title> <meta charset = "UTF-8"/> <link rel = "stylesheet" href = "_css/reset.css"/> <link rel = "stylesheet" href = "_css/estilo.css"/> </head> <body> <header> <h1>Don't be a stranger ;)</h1> </header> <div class = "container tamanho"> <section class = ""> <section class = "secao-form"> <h2>Input your datas</h2> <form action = "/action"> <div class = "container tamanho-form"> <p><label for = "cNome">Name: </label><input type = "text" name = "tName" id = "cNome" size = "39" maxlength = "50" placeholder = "Name"/></p> <p><label for = "cMail">E-mail: </label><input type = "email" id = "cMail" size = "39" maxlength = "30" placeholder = "Email"/> <p><label for = "cPhone">Phone: </label><input type = "text" name = "Phone" id = "cPhone" size = "39" maxlength = "25" placeholder = "Phone"/> <textarea name = "menssagem" rows = "9" cols = "57" placeholder = "Message" id = "text-area"></textarea> <input type = "submit" value = "Submit >"/> <div> </form> </section> <section class = "secao-contato"> <div class = "container tamanho-contato"> <h2>Ask Us Anything</h2> <ul id = "localizacao"> <li class = "endereco"> <h3>Address</h3> <p>350 7th Ave, New York, <br/> <span id = "linha-endereco">NY 760890, USA</span></p> </li> <li class = "email"> <h3>E-mail</h3> <p>Support@halocity.com</p> </li> <li class = "telefone"> <h3>Phone</h3> <p>+1 (212) 643-4534</p> </li> </ul> <footer> <ul class = "social"> <li><a href = "linkedin.com">LinkdIn</a></li> <li><a href = "facebook.com">Facebook</a></li> <li><a href = "twitter.com">Twitter</a></li> </ul> </footer> </div> </section> </section> </div> </body> </html> Imagem do design que estou estudando: https://drive.google.com/file/d/0Byt538E2KsCbME5haTJlNERyYzQ/view?usp=sharing Uma pergunta adicional: Notei que a página não tem um footer comum. Daí tive a ideia de colocar um footer no fim da segunda section onde tem as redes sociais. Isso semanticamente está correto ou é melhor deixar a página sem footer algum? Obs: Não criei essa o design, peguei no dribble para treinar o css e html. Desde já agradeço a todos!
  3. keven1406

    Que fonte seria essa?

    Boa sorte e bons estudos!
  4. keven1406

    Que fonte seria essa?

    Tenta colocar ela nesse site aqui: https://www.myfonts.com/WhatTheFont/ Ainda não consegui me dar bem com esse site, mas tem pessoas que conseguem identificar a fonte por ele. Tem tutoriais na internet que mostram como utiliza-lo caso você não souber inglês. Caso consiga identificar por ele poste aqui pra gente saber, ok? Há, você vai ter que converter essa imagem pra outro formato, já que o site não aceita o bmp. Outra coisa, quando postar imagens, tente direcionar o link pra uma página com a foto, como no caso do google drive. É ruim baixar uma coisa que não se sabe qual a origem exata. Então acho melhor, na próxima vez, você upar ela pra um site e depois postar o link aqui pra gente ver. Não sei se os outros pensam assim, mas é o que acho. ^^
  5. keven1406

    Duvida com as unidades de medida EM e REM do CSS

    Ok, obrigado por responder na velocidade da luz kkk. Então acho que minha duvida foi sanada. Só mais uma coisa, existe hoje algo que supere em formatação de texto o EM/REM?
  6. Pessoal, estou estudando sobre unidades de medidas do CSS. Estou com a seguinte duvida: Para sites responsivos, a medida EM só serve para dizer o tamanho da fonte? Posso formatar uma div em forma de caixa toda com a medida EM? No caso, essa medida fica fixa? Ou responsiva? Fiz um teste e deu que ficou fixa. Mas a EM é uma medida pra sites responsivos, então o certo não era o caixa ficar de acordo com a tela do dispositivo? ou isso fica com a porcentagem (%)? Exemplo: <!DOCTYPE html> <html> <head> <title>teste</title> <style> div { background-color: aqua; width: 30.8em; height: 30.8em; } </style> </head> <body> <div> </div> </body> </html> Aqui tenho um exemplo em que a div "pai" é em % e a div filho é com a unidade EM. Nesse caso, ele não deveria pegar o valor da porcentagem do pai, e automaticamente reduzir o tamanho da div filho? Isso parece bastante com a unidade de medida PX. <!DOCTYPE html> <html> <head> <title>teste</title> <style> #pai { background-color: aqua; width: 100%; height: 100%; } #filho { background-color: indianred; width: 30.0em; height: 30.0em; } </style> </head> <body> <div id = "pai"> <div id = "filho"> </div> </div> </body> </html> No caso, pra formatação de div's com width e height, tenho que utilizar % sempre que quiser deixar responsivo ? Se sim, isso significa que em questão de formatação de imagem o EM e REM seria praticamente a mesma coisa que o pixel? sempre ficando no mesmo tamanho independente do dispositivo como no exemplo a cima? Outra pergunta: O EM e REM é só pra tamanho de fontes ou da pra fazer a coisa a cima? Outra pergunta: Qual a unidade de medida mais utilizada hoje em dia pra sites responsivos? EM, REM ou outra melhor? Desde já obrigado!
  7. keven1406

    Duvida com as unidades de medida EM e REM do CSS

    Obrigado por responder. Então deixo os textos com o EM e os blocos com o % + media-query. Vejo muita gente falando em usar o Bootstrap e outros frameworks por ae. No entanto estou começando a estudar o media-query agora. No caso, é melhor eu ir estudando responsividade como estou fazendo agora, sem o uso do bootstrap? Vejo que tem gente que utiliza o bootstrap só pra pegar os grids e abandonam todo o resto dele. Se eu aprender a usar o media-query e aprender a fazer meus próprios grids, o bootstrap fica dispensável? Em questão de entrar no mercado (Estou louco pra ganhar dinheiro com isso. Faz 7 meses que estudo já o.o) sou obrigado a aprender o Bootstrap?
  8. Obrigado, era isso que eu queria. Algo pra estudar para poder conseguir fazer o game ficar responsivo. Obrigado
  9. Olá pessoal. Ainda não tenho muito conhecimento no desenvolvimento Web, porem já sei bastante coisa. Estou criando uma Engine para Visual Novels que vou disponibilizar como Open Source. Para quem não conhece esse tipo de game, ele é como um livro em que você vai lendo as falas, vendo os personagens por trás e ainda com trilha sonora. Sem contar que você pode fazer escolhas que vão modificar a história. Em fim, estou quase terminando a primeira versão da minha engine. Porem não sei como fazer para colocar ela aparecendo em todo o navegador. Vou postar uma imagem aqui de como está agora: Clique para acessar a imagem (Sprite e background não foram feitos por mim, só usei de modelo para construir o código. Quando eu colocar no GitHub irei criar minhas proprias imagens) O que quero é que ela fique fixa em toda área do navegador. O que devo estudar? Estudei DOM mas meu conhecimento ainda é pouco já que foquei mais na aprendizagem com o console e agora estou partindo pro documento. Tem como fazer isso sem um Framework? Não queria usar um Framework por que estou fazendo a Engine com puro JavaScript. Ainda estou pensando em como deixar o game responsivo (se tiverem alguma dica pra mim podem falar). Um pouco sobre a Engine: Não fiz com a Canvas porque ainda não estudei sobre ela. Fiz com o DOM normal e JS orientado a objetos. Não usei funções de ordem superior por que ainda não estudei sobre elas mas utilizei funções como setTimeout. Primeiro o usuario irá se deparar com o Menu, onde terá a opção de iniciar o jogo ou continuar. Iniciando o jogo, a personagem irá explicar um pouco sobre o poder da engine. Os textos são passados com um efeito onde aparece letra por letra. Também podemos mudar a posição do personagem como também da espressão do rosto dele apenas acrescentando as determinadas propriedades no objeto. Fora que terá música de fundo que é a unica coisa que falta implementar no projeto. Tudo isso orientado a objeto, onde só precisamos digitar em determinado objeto, a propriedade que queremos que ele tenha. Sou um cara que estuda programação a 7 meses sósinho. Mas não significa que estudei JS por todo esse tempo. Estudei lógica, depois HTML5 e CSS3, um pouco de Bootstrap e por fim estou me aprofundando no JS. Desde já obrigado pessoal!
  10. Tentei utilizar isso, no entanto só fica a parte do cenário em todo o navegador. Os personagens ficam fora do lugar. Durante minhas pesquisas, encontrei algo relacionado a media queries. Estudei CSS antes mas não cheguei a estudar isso. Vou dar uma estudada e ver se isso vai resolver alguma coisa.
  11. Isso, queria que ele ficasse dentro da área de todo o navegador. Por exemplo: clique nesse link para ver o exemplo Assim dessa forma. Independente do tamanho da tela do usuário.
  12. Ok. Fiz da seguinte forma: <!DOCTYPE html> <html lang = "pt-br"> <head> <meta charset = "UTF-8"/> <title>Lídia Engine - Desenvolvimento de Visual Novels</title> <link rel = "stylesheet" href = "_css/estilo.css"/> </head> <body> <div id = "corpo"> <!-- - - - - - - Aqui é o Menu inicial do jogo - - - - - - - - - - --> <section id = "menu"> <img src = "_imagens/_background/menu-foto.jpg" id = "fundo-menu" alt= "foto do menu"/> <h1 id = "titulo-do-menu">Lídia Engine</h1> <button id = "continuar" onclick = "continuar()">Continuar</button> <button id = "botao-iniciar" onclick = "iniciarOuVoltar(true)">Iniciar</button> </section> <!-- - - - - - - Aqui é a parte onde o jogo inicia - - - - - - - - --> <section id = "jogando"> <!-- A seguir as tags img estão no css com position: absolute; --> <img src = "" id = "fundo-jogo"/> <!-- Aqui fica o background do game que pode ser auterado com JS --> <img src = "" id = "esquerda"/> <!-- Aqui é um slote onde ficará o personagem na posição direita(pode ser alterado com JS) --> <img src = "" id = "emocao-esquerda"/> <!-- Aqui ficará a expressão que ficará sobre o rosto do personagem que está a esquerda. A expressão facial e a posição da mesma é auterada apenas digitando no objeto a posição desejada. As proximas são a mesma coisa --> <img src = "" id = "centro"/> <img src = "" id = "emocao-centro"/> <img src = "" id = "direita"/> <img src = "" id = "emocao-direita"/> <div id = "caixa-de-textos"> <!-- caixa onde o texto será apresentado. Terá dois botões, um para avançar e outro para voltar. Os buttons estão estilisados com position: absolute. --> <p id = "falas">Precione proximo para começar</p> <button onclick = "trocaDeFalas(1)" id = "botao-avancar">Avançar</button> <button onclick = "trocaDeFalas(0)" id = "botao-voltar">Voltar</button> </div> <!-- - - - - - - Menu de ferramentas contendo o botão salvar e sair - - - - - - --> <div id = "menu-ferramentas"> <section> <button id = "salvar" onclick = "salvar()">Salvar</button> <button id = "sair" onclick = "iniciarOuVoltar(false)">Sair</button> </section> </div> </section> </div> <!-- Demais códigos que não há necessidade de postar aqui --> <script src = "_javascript/var.js"></script> <script src = "_javascript/script.js"></script> </body> </html> Essa estrutura é tudo que preciso para fazer a engine funcionar. Isso é a base para os eventos que vão ocorrer quando pressionar os botões avançar ou voltar na caixa de texto. A área onde o jogo está acontecendo está estilisada assim no css: /*caixa onde o jogo está sendo apresentado*/ #corpo { width: 1100px; margin: auto; height:620px; box-shadow: 0px 0px 5px black; background-color: #606060; padding: 5px; position: relative; } #fundo-jogo { width:1100px; margin: 0px; } Meu problema é como deixar essa aba no navegador todo. Não queria usar framework mas também não quero uma resposta pra eu dar ctrl + c e ctrl + v. Queria saber exatamente o que deve estudar pra fazer isso. Se é um framework, se é determinado assunto do JS ou CSS? Ou até mesmo html5. Obrigado pessoal.
  13. keven1406

    Colocar alert javascript em div

    Puts, semana passada eu tava com essa duvida, sendo que estava pensando em criar uma div que seria um tipo de alerta. Só apareceria quando eu tivesse que tomar decisões. E com CSS simples eu poderia estilisala livremente. Mas como não fiz só fiquei com a ideia na mente. A sua pergunta é boa por que abre novos horizontes pra mim.
  14. keven1406

    Mostrar código na página

    Pessoal, primeiramente muito obrigado por responderem a minha pergunta. Desde já peço desculpas por ter postado um código meio desconexo na primeira pergunta. Mas estou com outra duvida a respeito da tag que vocês falaram. Notei que quando coloco o código dentro dessa tag, ele aparece na página, no entanto fica com uma formatação feia. E a posição que ele fica é de acordo com a posição do editor de texto. Pesquisei sobre a tag <pre> e descobrei que se refere a texto pre definido. Por isso aparece esse texto sem formatação. também utilizeu a forma que o @Iskandar falou, mas continuou a mesma coisa do exemplo que vou postar abaixo.Tentei editar ele com css e deu nisso: <!DOCTYPE html> <html lang = "pt-br"> <head> <title>Inserir código</title> <meta charset = "UTF-8"> <style> #caixa-codigo { position: relative; width:300px; height: 300px; margin-left: 100px; background-color: #666; } #caixa-codigo pre { position: absolute; top: 0px; left:-170px; color: white; } </style> </head> <body> <h1>Inserir o código de exemplo a baixo:</h1> <div id = "caixa-codigo"> <pre> for (var i = 2; i< 10; i++) console.log("i") </pre> </div> </body> </html> Foi a única forma que consegui colocar ele bonitinho dentro da caixa cinza. Isso está certo ou estou fazendo de forma errada? tem alguma forma melhor de formata-lo? Qual a diferença dessa tag para a tag <code>. Já que as duas tem o mesmo resultado, seria melhor utilizar o <code>, já que se refere a códigos? Obrigado pessoal!
  15. keven1406

    Mostrar código na página

    Como mostrar um código javaScript na página de forma correta? Quero fazer um artigo em HTML5 e nele exemplificar um código aleatório que não faz parte do código da página. No entanto, se eu digitar o código e depois tentar identar ele com HTML5, não consigo ter um bom resultado. O <br> não funciona e o código fica parecendo apenas em uma unica linha. <p> também não funciona. Tem alguma forma de digitar o código sem que a página o considere um código? Um exemplo: <!DOCTYPE html> <html lang = "pt-br"> <head> <title>Inserir código</title> <meta charset = "UTF-8"> <style> p { color: white; } #caixa-codigo { width:300px; height: 300px; background-color: aqua; margin-left: auto; margin-bottom: auto; } </style> </head> <script> </script> <body> <h1>Inserir o código de exemplo a baixo:</h1> <p> for (var i = 2; i< 10; i++) <br/> console.log("i") <br/> </p> </body> </html> Outra pergunta: Qual melhor plugin Wordpress para fazer esse tipo de coisa? Já pesquisei bastante sobre isso e as pessoas falam nomes de plugins, mas quando procuro lá no Wordpress o plugin, fica como não encontrado. Estava com duvida se era pra colocar essa pergunta no fórum de JavaScript, WordPress ou nesse aqui, me desculpem se coloquei no lugar errado. Desde já, obrigado!
  16. keven1406

    Boteco iMasters

    hic. 23 hic... isso porque hic... uma String 2 concatenada hic, com 3 é 23 cervejas hic. Mas como não tem " " hic, vou dizer que é 5 cervejas hic... Mas como hic estou bebado hic, me dê um desconto e diga que são 2 Strings hic.
  17. keven1406

    Boteco iMasters

    Ae, passa uma cerveja geladinha pra ca. kkk Hoje vou encher a cara! É tanto código na cabeça que tenho medo de beber e acordar num mundo virtual. kkk
  18. keven1406

    Não consigo entender esse código

    Muito bom! Desculpa a demora pra responder é que não tive muito tempo pra entrar aqui. Você explicou muito bem!
  19. keven1406

    Não consigo entender esse código

    Pessoal, estou estudando JavaScript pelo livro JavaScript Eloquent. Estou confuso com o funcionamento desse codigo: Link do capitulo do livro: https://github.com/braziljs/eloquente-javascript/blob/master/chapters/05-funcoes-de-ordem-superior.md A parte é sobre funções de ordem superior. E você pode ter funções que alteram outras funções. function noisy(f) { return function(arg) { console.log("calling with", arg); var val = f(arg); console.log("called with", arg, "- got", val); return val; }; } noisy(Boolean)(0); // → calling with 0 // → called with 0 - got false Eu entendo até bem o que está acontecendo, mas o que não entendo é como esse parâmetro "0" chega até a função noisy. Pelo que estou vendo ele é apenas um numero entre parênteses. Não sabia que valores isolados como esses poderiam ser passados como função. Sempre pensei que o certo seria: noisy(Boolean, 0); E que função f(arg) seria essa que nem declarada esta? Vou continuar analisando ela para ver se consigo entender. Desde já obrigado pessoal.
  20. Consegui entender direitinho e consegui por o botão de salve e continue no joguinho kkkk Obrigado.
  21. Pessoal, estou com uma duvida intrigante. Sou iniciante em JavaScript e na programação também. Queria saber se tem como salvar arquivos de um mini app que fiz sem precisar de um banco de dados de um servidor. Não fiz um site, fiz um joguinho com html, css e JS que não irá sair do meu PC, no entanto fiquei pensando: Será que da pra salvar o jogo sem precisar ter ou simular um servidor?. No caso, em uma pasta no nosso próprio computador. Até por que é ruim sempre que fechar o app, ele apaga todos os dados inseridos.
  22. Obrigado cara. Isso foi muito bem explicativo. Isso é uma forma de salvar como cash dos navegadores ou não tem nada a ver com isso? Vou ler as links que você postou. Obrigado!
  23. Desculpa, mas não te ignorei como foi parecido kkk. Vi sua resposta e vou disponibilizar ele no GitHub depois como Open Source . Me desculpe por não comentar nada kkkkk.
  24. Que legal. Você usou alguma biblioteca Javascript ou foi tudo no grosso? Esse JSON eu não tenho conhecimento. Já que sei o JS grosso, o básico de orientação a objetos e um pouco do DOM que estou estudando agora. Mas isso ainda não vi. O que preciso estudar pra entender direitinho o localStorage?
  25. keven1406

    Não entendo a função forEach

    Poxa, realmente. Quando você falou é que veio cair a fixa. tinha sim uma função anterior declarando a forEach, eu é que não estava ligando os pontos. Ficando assim: function forEach(array, action) { for (var i = 0; i < array.length; i++) action(array); } var numbers = [1, 2, 3, 4, 5], sum = 0; forEach(numbers, function(number) {sum += number;}); console.log(sum); Muito obrigado por me ajudar. Fica ai com a melhor resposta!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.