Jump to content
ViniciusRamoa

Postar em site criado em HTML, CSS3 e JavaScript

Recommended Posts

Primeiro, duas coisas: o texto é grandinho e não sei se postei no local correto, se não, eu peço que me orientem, se sim, obrigado, é meu primeiro post aqui.

Olá, eu estou criando um site bem simples, ele vai funcionar apenas para os usuários lerem conteúdos postados, será postados livros/quadrinhos e outros conteúdos próprios, eu já criei todo o site usando html e css3, mas ainda sou bem novo nessa área, estou sempre procurando aprender, então desculpe se minha dúvida for muito "noob", mas é o seguinte:

O site está todo pronto, em questão de layout e estrutura, estou estudando php e Banco de dados para criar um sistema de registro/login para os usuários salvarem seus dados, como "último livro lido, livros marcados com gostei" e etc, mas antes disso, Eu tenho uma dúvida, como vou postar nesse site? Pois eu tenho ele todo pronto, mas ele é "estatico", para eu adicionar algo novo, eu teria que criar tudo por linhas de códigos e etc, mas quais linguagens uso ou como é chamado os métodos para eu deixar esse site "vivo", no sentido de ele ter postagens constantes automaticamente por meio de uma simples interface para posts dos adms? 

A minha ideia é ter um "rank" de permissões, para usuários normais, lhes seriam atribuído o "rank 0", podendo assim apenas ler e salvar os dados como últimos lidos, quais começaram e não terminaram e etc, já  para os adms, eles seriam "rank 1", tendo as mesmas opcoes/funcoes do "rank 0", mas em sua página de perfil, surgiria opções para postar conteúdos, não precisa ter ferramentas para modificar o site, como mudar logo, mudar x cor de y local, mas sim apenas para postar conteudos, pois a manutenção e edição do site eu posso fazer arrumando as linhas de código, mas o sistema de postagem eu gostaria de automatizar, como um blog, que posta uma notícia, ela aparece com uma imagem e uma pequena descrição, quando eu postar outra, a antiga vai "descer" e cada vez mais ir para baixo ou para a página 2, 3 etc...

Um exemplo do que eu mais ou menos quero dizer, seria algo assim: leitor.net ou neoxscan.com acho que esses são os melhores exemplos, é algo bem simples, a pessoa acessa, ler e pronto, quem tiver logado vai ter informações de leitura salvas, mas a pergunta agora é: como postarei? Quais linguagens são usadas para isso? Existe algum nome que denomina essa função de posts para que eu pesquise mais sobre isso? Mesmo se não for possível explicar, por ser complexo, poderia pelo menos dizer qual caminho e o que é usado para tornar isso possível, por favor?

Então essa é minha dúvida, obrigado.

Share this post


Link to post
Share on other sites

@ViniciusRamoa

 

Você pode fazer o que você deseja usando PHP ou Java ou ASP ou NodeJS ou Python + MySQL ou SQLServer ou Oracle + Ajax + jQuery + JavaScript.

 

Existem um grande número de recursos para se construir um Website hoje em dia, o que eu recomendo é você a procurar por linguagens de programação com recursos na internet, de baixo valor ou valor zero, por este motivo eu usario neste caso o PHP + MySQL + Ajax + jQuery + JavaScript, pois são linguagens de programação com custo ZERO e de grande conteudo disponivel para auxilia-lo na construção em caso de dúvidas.

 

O problema é que, por você ter construido o site "inteiro" de forma fixa, você terá o que dizemos no mundo da programação chamado Retrabalho. Vou te explicar algo superficial, o PHP tem a "função" tornar a página dinâmica em questão de conteudo, mas o PHP após carregado não é "dinâmico" isso porque ele monta a página do lado do Servidor e apresenta para o usuário que está navegando o resultado FINAL, então para que o site se torne completamente dinâmico, como no caso de alguém postar algo e ele aparecer repentinamente na tela sem a necessidade de um refresh da página, como os post do facebook por exemplo, você precisa usar Ajax com jQuery, o uso do JavaScript torna o trabalho de validações em tempo de execução da página de forma mais simples, como por exemplo ao digitar um e-mail em um TEXTBOX o JavaScript pode validar no momento em que cada tecla é pressionada se o e-mail é um e-mail válido ou não e permitir que o envio seja feito ou não, bom e o MySQL é o seu SGDB (Sistema Gerenciador de Banco de Dados). nele você ira guardar todas as informações como os POST, ira armazenas os usuários cadastrados, login, senha, e-mail, os livros lidos, os favoritos entre outras coisas mais.

 

Então o seu retrabalho fica em todo o seu sistema, vou te dar um exemplo, você tem a sua página inicial, a INDEX.HTML, você terá que transformar ela em INDEX.PHP e todo o conteudo nele apresentado de forma fixa você precisara subistituir por acessos ao MySQL usando query's com o PHP e com os resultados retornados você monta a página a ser apresentada com o próprio PHP, depois disso cada estimulo, cada input feito pelo usuário você ira tratar com o Ajax e o jQuery para que ele possa armazenar nas bases o conteudo como os "post".

 

Bom, se você precisar de ajuda para montar algo, poste o código com a dúvida ou solicitação que alguém irá lhe ajudar.

 

Espero ter ajudado.

 

Att.

Felipe Coutinho

Share this post


Link to post
Share on other sites

Olá!

Eu já estava começando a estudar PHP+MySQL, mas sua resposta já me tirou muitas dúvidas, vejo que agora só depende de eu aprender as outras linguagens e fazê-las funcionar como eu quero, muito obrigado mesmo.

Mas bom, como você disse, precisarei fazer um "retrabalho", esse retrabalho envolve a parte de design? Exemplo, precisarei remodelar objetos, menus, cores e etc para tornar ela de "INDEX.HTML" para "INDEX.PHP"? Ou esse "retrabalho" não irá me fazer alterar tais coisas no site? Eu sei que irá incrementar mais conteúdos, mais funções etc, mas tudo já "estruturado" atualmente precisará ser totalmente refeito com outras configurações? Ou eu poderei apenas "linkar" as informações, adicionar scripts e etc que já funcionará? Pois o que veio a minha mente, é que com as outras linguagens, php e etc, precisarei apenas "dar vida" ao que já está "pronto". 

Obrigado novamente.

Share this post


Link to post
Share on other sites

@ViniciusRamoa

 

Você não precisa mudar nada de "layout", se você mudar de HTML para PHP nada será perdido, apenas é claro que você quiser apresentar algo no meio do código "antigo" do HTML com o PHP, exemplo um nome de usuário, se você fizer isso vai precisar implementar apenas, mas refazer não.

 

De HTML para PHP "nada" muda, por enquanto.

 

Espero ter ajudado.

 

Att.

Felipe Coutinho

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Sapinn
      Quero que quando o usuario chegue em uma parte do menu site ele o menu fique fixo no topo da pagina. Como fazer isso???
    • By Sapinn
      Eu tenho um form e toda vez que alguém clicar no input eu quero que a borda de baixo mude a cor e quando ele clicar fora quero que volte ao normal quero isso para todos os campo de todos os foms que eu tiver
    • By lezão
      Boa Tarde, pessoal!
      Td bem com vcs?
      Olha eu ai novamente!
      Pesquisei e  fucei e nada, não consegui nada, não de ficar enchendo o saco de vcs, mas qnd a corda aperta, corro aqui para um help.
      Estou com um código que roda perfeitamente, mas qnd eu preciso de um posicionamento, naun vai.
       
      vejam na imagem abaixo para entender?
       
       
      Vejam que o valor e os outros item abaixo dele, dependendo da quantidade de texto ele fica em um ponto.
      Gostaria que ele ficasse, com muito ou pouco texto na posição da 3ª imagem.
      Será possivel isso ?
       
      meu codigo CSS:
      .banner img { max-width: 100% !important; height: 200px; } .container-cards { flex-wrap: wrap; display: inline-flex; width: 400px; align-items: center; justify-content: center; } .box-container { /*border: 1px solid red;*/ display: flex; background: #fcfcfc; font:80%/1 Arial; font-size: 14px; border-radius: 5px; align-items: center; width: 100%; height: 80px; border: 0px solid #AAAAAA; margin: 5px; background-color: #fcfcfc; -webkit-box-shadow: 1px 3px 5px rgba(250, 242, 242, 0.77); -moz-box-shadow: 1px 3px 5px rgba(250, 242, 242, 0.77); box-shadow: 1px 3px 5px rgba(250, 242, 242, 0.77); } .box-image { width: 20%; align-items: center; display: flex; height: 100%; justify-content: left; border-right: 0px solid #AAAAAA; } .box-container .box-image img { width: 75px; height: 75px; } .box-container .box-content { align-items: left; display: flex; height: 75%; justify-content: left; flex-direction: column; padding: 10px; } .title { margin-bottom: 10px; font-size: 16px font-weight: bold; color: #000; } .description { font:80%/1 Arial; font-size: 14px; color: #8a8686; top: 50px; left: 50px; } Codigo HTML:
      <div class="box-container"> <section class=box-image>&nbsp; <img src="<?php echo $Foto_produto; ?>" style="border-radius:10px" width="250px" height="230px"/> </section> <section class="box-content"> <label class="title"> <div align="left"><b><?php echo strtoupper($Nome_produto); ?></b></div></label> <span class="description"><div align="left"><?php echo $Descricao_produto; ?></div></span> </section> <section class=box-image-2> <label class="title"><div align="center"><b><?php echo($Valor_produto) ?></b></div></label> <span class="description"> <div align="left"><br/> <input type="checkbox" name="sabor" id="evento_value2" value="<?php echo $Valor_produto; ?>"> <input type="hidden" name="vl_sabor" value="<?php echo $Valor_produto; ?>"> <SELECT name="qntdade" width="2"> <option value="1">1</option> <option value="2">2</option> </SELECT> </div></span> </section> </div> Desde ja muito obrigado!
    • By lezão
      Bom dia, meus amigos!
      Td bem com vcs?
      Estou precisando de mais uma ajudinha de vcs.
      Tenho um codigo aqui e não estou acertando a mão nele, estou apanhando desse tal de media queries rsrsrs.
      Vejam os exemplos de como estão os meus codigos:
       
      Gostaria que no Desktop ficasse como o Mobile, e os dois centralizado na pagina, notem que não estão.
       
      segue meu codigo:
      <style type="text/css"> /* My opinion */ body { background-image: url(imagens/slide_1.jpg); margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } /* Section clientes */ .container-cards { flex-wrap: wrap; display: inline-flex; width: 100%; align-items: center; } .box-container { /*border: 1px solid red;*/ display: flex; background: #FFFFFF; font:80%/1 Arial; font-size: 14px; border-radius: 5px; align-items: center; width: 100px; height: 120px; border: 2px solid #AAAAAA; margin: 10px; box-shadow: 0 0 10px #ddd; } .box-container .box-image img { width: 93px; height: 93px; text-align: center; } .title { margin-bottom: 10px; font-size: 16px; font-weight: bold; color: #000; } .description { font-size: 14px; color: #8a8686; } </style> </head> <body> <!--My option--> <div align="center"> <img src="imagens/logo.png" width="200px" height="192px"/></div> <br/> <div align="center"> <div class="container-cards"> <div class="box-container" onclick="location.href='cardapio_pizza.php'" style="cursor:pointer;" align="center"> <section class="box-image"> &nbsp;<img src="imagens/banner_pizzas.png"/><br/> <label class="title"><b>Pizzas</b></label> </section> </div> <div class="box-container" onclick="location.href='cardapio_pizza_cone.php'" style="cursor:pointer;"> <section class="box-image"> <img src="imagens/banner_pizzas_cone.png"/><br/> <label class="title"><b>Pizzas no Cone</b></label> </section> </div> <div class="box-container" onclick="location.href=''" style="cursor:pointer;"> <section class="box-image"> <img src="imagens/banner_porcoes.png"/><br/> <label class="title"><b>Porções</b></label> </section> </div> <div class="box-container" onclick="location.href='cardapio_lanches.php'" style="cursor:pointer;"> <section class="box-image"> <img src="imagens/banner_lanches.png"/><br/> <label class="title"><b>Lanches</b></label> </section> </div> <div class="box-container" onclick="location.href='cardapio_fritas.php'" style="cursor:pointer;"> <section class="box-image"> <img src="imagens/banner_cone_fritas.png"/><br/> <label class="title"><b>Cone de fritas</b></label> </section> </div> <div class="box-container" onclick="location.href='cardapio_refri.php'" style="cursor:pointer;"> <section class="box-image"> <div align="center"> <img src="imagens/banner_refri_sucos.png"/><br/> <label class="title"><b>Bebidas</b></label> </div> </section> </div> </div> <div align="center"> <font size="2" color="#FFFFFF" face="arial"> <p>Horário de atendimento:<br/>Segunda á Sexta das 19:00 as 22:00<br/>Sextas, Sábados e Domingos das 19:00 as 23:30</p> </font> </div>  
       
    • By daviassumpcao
      Pessoal... Estou pegando 2 valores via class em divs e fazendo um cálculo para saber a porcentagem de desconto obtida (uma lista de registros). Porém, quando vou inserir o resultado em outras div's com class também, não funciona. Se eu mudo para id, é inserido na primeira div apenas. O identificador dessa div é a "desconto" que está com o fundo vermelho. É errado usar o getElementsByClassName para inserir os valores encontrados? Até tentei um for mas não rolou.... (sou iniciante em JS e isso é exercício estou fazendo) O script:
       
      <div class="container"> <div class="prateleira-wrap"> <div class="prateleira-preco-de">De R$ 10,00</div> <div class="prateleira-preco-por">Por R$ 5,00</div> <div class="desconto"></div> </div> <div class="prateleira-wrap"> <div class="prateleira-preco-de">De R$ 9,00</div> <div class="prateleira-preco-por">Por R$ 3,00</div> <div class="desconto"></div> </div> </div> .container{ background-color:#e4e4e4; width:100%; height:auto; float:left; } .prateleira-wrap{ border: 1px solid #000; width:40%; float:left; margin:10px; } .desconto{ background-color:red; color:#fff; width:100%; height:20px; float:left; } function getMoney(str) { return str .replace(/[^\d,]+/g, '') // Remove caracteres desnecessários. .replace(',', '.'); // Troca o separador decimal (`,` -> `.`) } var a = document.getElementsByClassName("prateleira-preco-de")[0].innerHTML; var b = getMoney(a); var c = document.getElementsByClassName("prateleira-preco-por")[0].innerHTML; if ( c !== null) { var d = getMoney(c); var e = ((d / b) * 100) - 100; var f = e.toFixed(2); document.getElementsByClassName("desconto").innerHTML = ('Desconto de ' + f + '%'); // console.log('Desconto de ' + f + '%'); } else { console.log("Não há desconto no preço do produto"); }  
       
       
×

Important Information

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