JQuery Escrever em um livro digital

[Laeti]

Oi! Quero criar um site colaborativo que tenha um livro, onde as pessoas possam digitar e aparecer no livro com letra manuscrita simultaneamente ou com um simples enter/enviar mensagem. Como espero que muitas pessoas escrevam, quero que o caderno vire as páginas e tenha o formato de um livro. É como se fosse um catálogo virtual com edição de texto do usuário. A minha dificuldade está sendo encontrar este material pronto ou desenvolvê-lo, pois nem sei em qual plataforma ou como poderia fazê-lo. O meu plano para o site é legal, mas só revelarei do que se trata exatamente quando o concluir. Vocês podem me ajudar?

[Wagner Ruaro]

15 minutos atrás, Laeti disse:

onde as pessoas possam digitar e aparecer no livro com letra manuscrita

Isto é meio complicado hoje em dia, não acha amigo?

Seria fácil através do PC utilizar programas para copiar a forma de escrever das pessoas e utilizá-las de forma ilícita.

Ou estas fontes seriam as utilizadas pelo word e etc. Como o Edwardian Script?

[Laeti]

Me expressei mal. Eu queria usar uma fonte padrão, tipo a Embassy do Word, para a conversão da letra. A grande questão está sendo fazer um site onde qualquer um pode digitar sobre um livro e aparecer o texto no livro. Existem aplicativos que fazem algo similar em caderno de notas, só que meu objetivo não é este.

[Wagner Ruaro]

1 minuto atrás, Laeti disse:

Me expressei mal. Eu queria usar uma fonte padrão, tipo a Embassy do Word, para a conversão da letra. A grande questão está sendo fazer um site onde qualquer um pode digitar sobre um livro e aparecer o texto no livro. Existem aplicativos que fazem algo similar em caderno de notas, só que meu objetivo não é este.

Ah tá.

Tenho um amigo que é escritor, ele usa o In Design e outros do pacote Adobe. Mas não sei se funcionaria assim como deseja. Teria que ser algo que fosse um misto do In Design com aquelas janelas de newsletter onde digitamos algo em sites comerciais.

Vamos ver se aparece algum programador que saiba como fazer isto. Mas é interessante esta ideia apesar de não estar revelada. Vamos esperar então as opiniões dos experts.

[Laeti]

Exatamente! Estou fazendo pesquisas e não encontro nada parecido com o que preciso para este projeto.

@Wagner Ruaro Valeu a ajuda e a atenção! Se der certo, eu volto aqui para mostrar para todo mundo e garanto que quase todo mundo quererá escrever uma mensagem.

[DiF]

@Laeti @Wagner Ruaro

Olá, seja bem vindo em nosso Clube do Hardware.

 

Bom, para fazer o que você quer, precisa ter alguns conhecimentos em HTML/5 CSS3, Javascript, linguagem de programação server-side e banco de dados.

 

Basicamente, o que você vai fazer e usar:

Para criar o layout e efeito de página virando e letras em hand letter - CSS3/HTML

Para inserir e armazenar os dados  -  PHP, jQuery( framework javascript que facilita até no uso do ajax), e MySQL(banco de dados)

 

Em tese não é complicado e nem difícil. Mas exige que tenhas conhecimento e domínio, principalmente na modelagem do seu banco de dados e relacionamentos.

 

Exemplos:

Página virando: 

https://codepen.io/nicks/pen/NxeGWq

 

http://cssdeck.com/labs/pure-css3-page-flip-effect

 

Este é sem dúvidas o melhor e o mais fácil de todos: http://www.turnjs.com/

 

[Wagner Ruaro]

@DiF Show!

[Laeti]

@DiF Sensacional!

Eu recebi indicações que conseguiria com JQuery, mas estou com dificuldades. Se tiver alguma indicação de onde posso focar para atingir o meu objetivo, serei imensuravelmente grata!

 

Acabei de ler sobre a linguagem server-side e deverá ser com ela que eu bloquearei o segundo acesso do usuário ao site. 

[DiF]

@Laeti

O jQuery tem funções específicas para fazer requisições assíncronas(ajax), onde quando um usuário escreve e aperta no botão de enviar e/ou "enter" para enviar os dados do formulário, é chamada uma função chamada $.ajax().

 

Esta função possui diversos parâmetros.

Não vou citar todos, só os mais utilizados. Você pode encontrar mais informações direto no manual (API)do jQuery)

 

Vamos lá:

 

Digamos que você tem um formulário onde possui um textarea(partindo da premissa que o usuário já está logado no sistema)

 

<form id="form" action="#" method="post">
  <textarea name="escrita" class="texto"></textarea>
  <input type="submit" class="btn-postar" value="Publicar" />
</form>

Perceba, que não coloquei  o action no formulário.

Porque não vamos enviar direto ao php. Mas sim fazer uma requisição assíncrona neste arquivo php pelo jQuery.

 

Então primeiro de tudo, você precisa importar a biblioteca jQuery. Seja por arquivo dentro do diretório do seu projeto ou por CDN.

 

Aqui vou usar o CDN por ser online  e mais seguro. Este é o primeiro passo. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/JavaScript">
  
    //Quando o DOM estiver pronto
    $(document).ready(function(){
         //Aqui dentro vai a chamada da função $.ajax()
    });
</script>  

A sintaxe inicial pede que você inicie a função ready().

 

Agora veremos como chamar a função. $.ajax()

 

$(document).ready(function(){

  //Armazenamos o botão de postar em uma variável
  var posta = $(".btn-postar");
  
  //Atribuimos o botão ao evento de clicar.
  posta.on("click", function(){
      //Aqui dentro vamos chamar a função $.ajax!
  
  });
  
});

Agora que já temos a ação do click no mouse no botão de postar vamos pegar o valor do textarea e enviar ao php.

 

//Atribuimos o botão ao evento de clicar.
  posta.on("click", function(){
      //Variável que armazena o conteúdo do textarea
       var texto = $(".texto").val();
    
       //chama a função $.ajax()
       $.ajax({
             //arquivo que será requisitado
             url: "recebeDados.php",
             //tipo de dado a ser retornado 
             dataType: "HTML",
             //o name do textarea e o valor dele 
             data: escrita : texto 
       }).done(function(retorno){
             //insere o texto no lugar onde você quiser 
             $(".pagina").html(retorno);
       }).fail(function(erro){
              //insere a mensagem de erro
              $(".msg-erro").html(erro); 
       });
  
  });

Basicamente, nas funções done() e fail(),  eles são o retorno do teste de IF contido no arquivo recebeDados.php.

Onde você testa se  foi bem sucedido a inserção de dados no banco de dados. Se tudo OK, o retorno cai ali dentro da função done().

 

Se houver erro, no php, vai entrar no bloco do else, onde vai acusar o erro... então esta mensagem será retornada ali na função fail().

 

O uso do ajax por jQuery é bem fácil de entender  

Se quiser fazer com enter, você pode usar o evento de keypress testando com a tecla  13 como por exemplo if (e.which == 13)  que é o "enter"

 

Qualquer dúvida que você tiver sobre criação da estrtura, envio de dados, inserção no banco de dados e etc, não hesite em nos perguntar, mas é importante que você tente fazer antes e postar seus códigos, assim podemos lhe orientar para que consigas atingir seus objetivos. 

 

Fico no aguardo.

Por hora  vou mover seu tópico para o lugar correto( programação web) 

 

[Laeti]

@DiF Perfeito! Sem palavras para agradecer por tanta ajuda! Vou estudar e retornarei aqui. Obrigadíssima!