keven1406
-
Content count
27 -
Joined
-
Last visited
About keven1406
Recent Profile Visitors
426 profile views
-
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?
-
Boa sorte e bons estudos!
-
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. ^^
-
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!
-
css3 Duvida com as unidades de medida EM e REM do CSS
keven1406 replied to keven1406's topic in HTML e 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? -
css3 Duvida com as unidades de medida EM e REM do CSS
keven1406 replied to keven1406's topic in HTML e 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? -
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!
-
Como deixar Jogo feito em JavaScritpt e HTML5 na tela toda?
keven1406 replied to keven1406's topic in Javascript
Obrigado, era isso que eu queria. Algo pra estudar para poder conseguir fazer o game ficar responsivo. Obrigado -
Como deixar Jogo feito em JavaScritpt e HTML5 na tela toda?
keven1406 replied to keven1406's topic in Javascript
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. -
Como deixar Jogo feito em JavaScritpt e HTML5 na tela toda?
keven1406 replied to keven1406's topic in Javascript
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. -
Como deixar Jogo feito em JavaScritpt e HTML5 na tela toda?
keven1406 replied to keven1406's topic in Javascript
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. -
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!
-
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.
-
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!
-
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.