Discussoes de Programacao e Tecnologia

Dúvida com HTML

3 respostas
Lucas_de_Almeida_Mar
Lucas_de_Almeida_Mar

Boa tarde pessoal,
Bem, estou enfrentando um problema, tenho que criar apresentação de slides em HTML 5, e até já encontrei um template muito legal da Google.
:stuck_out_tongue:
Ótimo!

O problema: :?:

Estou querendo criar um botão que, ao ser acionado irá criar uma no código, por exemplo:

Para criar um novo slide basta apenas eu colocar , está criado um novo slide, mas não posso pedir que o usuário aprenda HTML para poder usar minha ferramenta.

Então queria criar uma interface para que facilita-se seu uso, mas travei em como faze-lo, quem puder me ajudar me informando bibliotecas ou artigos que possam me ajudar, eu agradeço mesmo!

Forte abraço, vou continuar tentando por aqui! :slight_smile:

Alura Desenvolvimento Front-End React Do primeiro componente à liderança técnica! HTML/CSS/JavaScript fundamental, React com hooks e...

3 Respostas

Gustavo_Marques
Gustavo_Marques

Veja esse artigo: http://programadorprofissional.blogspot.com.br/2012/10/inserindo-conteudo-dinamico-com-jquery.html
Além do código o artigo mostra o exemplo funcionando.

O código é esse:

<html>
   <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>  
   </head>
   <body>
      <input type="button" value="Adicionar Paragrafo" onclick="$('#conteudo').append('<p>Paragrafo Adicionado</p>');" />
      <div id="conteudo"></div>
   </body>
</html>

É só adaptar para inserir ao inves de

att

Lucas_de_Almeida_Mar
Lucas_de_Almeida_Mar

Valeu cara, muito obrigado!

Lucas_de_Almeida_Mar
Lucas_de_Almeida_Mar

Meu caro amigo, muito obrigado pela dica, só ao testar não fez bem oque eu queria, porque ele lança o código no plano de fundo e não está criando o slide novo como eu queria, vou te passar o código para você poder ver com seus próprios olhos.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <!--Lucas Marciano-->
<html xmlns:ui="http://java.sun.com/jsf/facelets">
    <!--
      Google HTML5 slide template
    
      Authors: Luke Mahé (code)
               Marcin Wichary (code and design)
               
               Dominic Mazzoni (browser compatibility)
               Charles Chen (ChromeVox support)
    
      URL: http://code.google.com/p/html5slides/
    -->

    <!-- src='http://html5slides.googlecode.com/svn/trunk/slides.js'> -->
    <head>

        <title>Nova apresentação</title>

        <meta charset='utf-8'>
        <script
            src='http://html5slides.googlecode.com/svn/trunk/slides.js'>
        </script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>  

    </head>

    <style>
        /* Your individual styles here, or just use inline styles if that?s
           what you want. 
        
        "<article><h3>Cabeçalho do Slide 2</h3><p></p><p>There is more text just underneath with a <code>code sample: 5px</code>.</p></article>"*/


    </style>
 


<body style='display: none'>
<section class='slides layout-widescreen template-io2011'>

    <!-- Your slides (<article>s) go here. Delete or comment out the
         slides below. --> 
    <article>
        <h1>
            
            <br>
           Titulo principal 1
        </h1>
        <p>
            <input type="button" value="Adicionar Paragrafo" onclick="$('#conteudo').append('<article><h3>Cabeçalho do Slide 2</h3><p></p><p>There is more text just underneath with a <code>code sample: 5px</code>.</p></article>');" />  
            
            <br>
            Outubro 30, 2012.
        </p>
    </article>
    
    <div id="conteudo"></div> 
    
    <article>
        <h1>
            
            <br>
           Titulo principal 2
        </h1>
        <p>
            <input><input type="submit" value="Enviar" name="enviar" />
            <br>
            Outubro 30, 2012.
        </p>
    </article>
    <article>
        <h3>
            Cabeçalho do Slide 2
        </h3>
        <p>
       
        </p>
        <p>
            There is more text just underneath with a <code>code sample: 5px</code>.
        </p>
    </article>

    <article class='smaller'>
        <h3>
            Simple slide with header and text (small font)
        </h3>
        <p>
            This is a slide with just text. This is a slide with just text.
            This is a slide with just text. This is a slide with just text.
            This is a slide with just text. This is a slide with just text.
        </p>
        <p>
            There is more text just underneath with a <code>code sample: 5px</code>.
        </p>
    </article>

    <article>
        <h3>
            Slide with bullet points and a longer title, just because we
            can make it longer
        </h3>
        <ul>
            <li>
                Use this template to create your presentation
            </li>
            <li>
                Use the provided color palette, box and arrow graphics, and
                chart styles
            </li>
            <li>
                Instructions are provided to assist you in using this
                presentation template effectively
            </li>
            <li>
                At all times strive to maintain Google's corporate look and feel
            </li>
        </ul>
    </article>

    <article>
        <h3>
            Slide with bullet points that builds
        </h3>
        <ul class="build">
            <li>
                This is an example of a list
            </li>
            <li>
                The list items fade in
            </li>
            <li>
                Last one!
            </li>
        </ul>

        <div class="build">
            <p>Any element with child nodes can build.</p>
            <p>It doesn't have to be a list.</p>
        </div>
    </article>

    <article class='smaller'>
        <h3>
            Slide with bullet points (small font)
        </h3>
        <ul>
            <li>
                Use this template to create your presentation
            <li>
                Use the provided color palette, box and arrow graphics, and
                chart styles
            <li>
                Instructions are provided to assist you in using this
                presentation template effectively
            <li>
                At all times strive to maintain Google's corporate look and feel
        </ul>
    </article>

    <article>
        <h3>
            Slide with a table
        </h3>

        <table>
            <tr>
                <th>
                    Name
                <th>
                    Occupation
            <tr>
                <td>
                    Luke Mahé
                <td>
                    V.P. of Keepin? It Real
            <tr>
                <td>
                    Marcin Wichary
                <td>
                    The Michael Bay of Doodles
        </table>
    </article>

    <article class='smaller'>
        <h3>
            Slide with a table (smaller text)
        </h3>

        <table>
            <tr>
                <th>
                    Name
                <th>
                    Occupation
            <tr>
                <td>
                    Luke Mahé
                <td>
                    V.P. of Keepin? It Real
            <tr>
                <td>
                    Marcin Wichary
                <td>
                    The Michael Bay of Doodles
        </table>
    </article>

    <article>
        <h3>
            Styles
        </h3>
        <ul>
            <li>
                <span class='red'>class="red"</span>
            <li>
                <span class='blue'>class="blue"</span>
            <li>
                <span class='green'>class="green"</span>
            <li>
                <span class='yellow'>class="yellow"</span>
            <li>
                <span class='black'>class="black"</span>
            <li>
                <span class='white'>class="white"</span>
            <li>
                <b>bold</b> and <i>italic</i>
        </ul>
    </article>

    <article>
        <h2>
            Segue slide
        </h2>
    </article>

    <article>
        <h3>
            Slide with an image
        </h3>
        <p>
            <img style='height: 500px' src='images/example-graph.png'>
        </p>
        <div class='source'>
            Source: Sergey Brin
        </div>
    </article>

    <article>
        <h3>
            Slide with an image (centered)
        </h3>
        <p>
            <img class='centered' style='height: 500px' src='images/example-graph.png'>
        </p>
        <div class='source'>
            Source: Larry Page
        </div>
    </article>

    <article class='fill'>
        <h3>
            Image filling the slide (with optional header)
        </h3>
        <p>
            <img src='images/example-cat.jpg'>
        </p>
        <div class='source white'>
            Source: Eric Schmidt
        </div>
    </article>

    <article>
        <h3>
            This slide has some code
        </h3>
        <section>
            <pre>
&lt;script type='text/javascript'&gt;
  // Say hello world until the user starts questioning
  // the meaningfulness of their existence.
  function helloWorld(world) {
    for (var i = 42; --i &gt;= 0;) {
      alert('Hello ' + String(world));
    }
  }
&lt;/script&gt;
&lt;style&gt;
  p { color: pink }
  b { color: blue }
  u { color: 'umber' }
&lt;/style&gt;
            </pre>
        </section>
    </article>

    <article class='smaller'>
        <h3>
            This slide has some code (small font)
        </h3>
        <section>
            <pre>
&lt;script type='text/javascript'&gt;
  // Say hello world until the user starts questioning
  // the meaningfulness of their existence.
  function helloWorld(world) {
    for (var i = 42; --i &gt;= 0;) {
      alert('Hello ' + String(world));
    }
  }
&lt;/script&gt;
&lt;style&gt;
  p { color: pink }
  b { color: blue }
  u { color: 'umber' }
&lt;/style&gt;
            </pre>
        </section>
    </article>

    <article>
        <q>
            The best way to predict the future is to invent it.
        </q>
        <div class='author'>
            Alan Kay
        </div>
    </article>

    <article class='smaller'>
        <q>
            A distributed system is one in which the failure of a computer
            you didn?t even know existed can render your own computer unusable.
        </q>
        <div class='author'>
            Leslie Lamport
        </div>
    </article>

    <article class='nobackground'>
        <h3>
            A slide with an embed + title
        </h3>

        <iframe src='http://www.google.com/doodle4google/history.html'></iframe>
    </article>

    <article class='nobackground'>
        <iframe src='http://www.google.com/doodle4google/history.html'></iframe>
    </article>

    <article class='fill'>
        <h3>
            Full-slide embed with (optional) slide title on top
        </h3>
        <iframe src='http://www.google.com/doodle4google/history.html'></iframe>
    </article>

    <article>
        <h3>
            Thank you!
        </h3>

        <ul>
            <li>
                <a href='http://www.google.com'>google.com</a>
        </ul>
    </article>

</section>

</body>
</html>

A parte do codigó qe você me passou está na linha 52.

Forte abraços e muito obrigado

Criado 30 de outubro de 2012
Ultima resposta 31 de out. de 2012
Respostas 3
Participantes 2

Topicos relacionados

Componente de forum 4 respostas Consultar CPF pelo nome na Receita Federal 5 respostas Pegadinhas que se fazem com os pobres estagiários 62 respostas [Resolvido] Como comparar Strings em C? 6 respostas Converter pixels para centímetros 9 respostas
Alura Sistemas operacionais: entenda seu conceito e suas funções Descubra o que são sistemas operacionais, suas funções e tipos. Aprenda tudo de forma clara e objetiva. Não perca tempo!
Lumina Lumina: a IA que te traz resultados Prompts prontos por especialistas. Resolva seus problemas de verdade.