laira
/
iFractions-doc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
							<!-- LInE - Free Education, Private Data - http://www.usp.br/line -->
<!DOCTYPE html>
<html lang='pt-br'>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>

  <meta name="description" content="Collection of educational games for teaching fractions" />
  <meta name="keywords" content="ifractions, ifrações, fraction, game, private data, math, moodle" />

  <link rel="icon" type="image/ico" href="./assets/flag_icon.png">
  <link rel="stylesheet" href="./style/bootstrap/bootstrap.min.css">
  <link rel='stylesheet' href="./style/style.css">

  <base target="_blank">

  <title>iFrações | Início</title>
</head>

<body class="container-flex">

  <!-- menu superior -->
  <nav class="navbar navbar-expand-lg navbar-dark ifr__color__blue">
  </nav>

  <!-- botao de voltar ao inicio da pagina -->
  <button onclick="backToTop()" type="button" id="ifr__btn__backToTop" title="Go to top"
    class="btn btn-primary">&uparrow;</button>

  <!-- modal -->
  <div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" id="myModal-img" src="">
    <div id="caption"></div>
  </div>

  <!-- header -->
  <header class="ifr_header jumbotron jumbotron-flex p-5 d-flex flex-column justify-content-center">
    <h1 class="display-4"><em>iFrações</em></h1>
    <p class="lead">Aprenda frações jogando!</p>
    <hr class="my-4">
    <p class="lead">O <strong>iFrações</strong> é uma coletânea de jogos online para o <strong>ensino de
        frações</strong> direcionado a alunos do Ensino Fundamental. Ele é um dos sistemas educacionais de
      <strong>código aberto</strong> que vem sendo desenvolvido pelo <a href='http://www.usp.br/line'
        target="_blank">LInE</a> e utiliza dinâmicas de jogo para apresentar conteúdos de frações de forma aplicada,
      buscando atrair o interesse do aluno e prover visualizações lúdicas de conteúdos formais, além de
      <strong>permitir ampla personalização dos jogos</strong>, possibilitando que se adaptem às necessidades do
      usuário.
    </p>
  </header>

  <!-- game frame -->
  <!-- <iframe src=" http://www.usp.br/line/ifractions#ifractions-canvas" frameborder="0"
    style="width:100%; height:700px;"></iframe> -->

  <!-- pagina -->
  <main class='container mb-5 py-5'>

    <!-- info cards -->
    <div class="row text-start">
      <div class="col-md-4 d-flex align-items-stretch">
        <section class="card shadow bg-primary text-white" id="publico alvo">
          <h4 class="card-title text-center mt-4">Publico Alvo</h4>
          <hr class="text-white mx-4" />
          <div class="card-body">
            <ul>
              <li><strong>Alunos</strong> desejando estudar diferentes assuntos de frações de forma aplicada
              </li>
              <li>
                <strong>Professores/tutores</strong> participando do ensino de frações que tenham interesse em:
                <ul>
                  <li>
                    utilizar um jogo personalizavel como material auxiliar no ensino de um tópico específico no nível de
                    dificuldade desejado
                  </li>
                  <li>
                    criar uma trilha com diferentes atividades em crescente grau de dificuldade de forma a guiar o aluno
                    pelo
                    processo de aprendizagem de vários conteúdos
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </section>
      </div>
      <div class="col-md-4 d-flex align-items-stretch">
        <section class="card shadow bg-primary text-white" id="concepcao">
          <h4 class="card-title text-center mt-4">Concepção</h4>
          <hr class="text-white mx-4" />
          <div class="card-body">
            <p>O projeto teve início em 2016 numa parceria entre os professores
              <a class="text-info fw-bold" href='http://www.ime.usp.br/~leo'>Leônidas de Oliveira Brandão</a>
              (<a class="text-info fw-bold" href='http://www.ime.usp.br'>IME-USP</a>) e
              <a class="text-info fw-bold" href='https://users.dcc.uchile.cl/~mibarra/'>Manuel Ibarra</a>
              (EAPIIS-UNAMBA), baseado no
              <a class="text-info fw-bold" href='https://matematica.br/iassign/index_pt.html'>Módulo de Aprendizado
                Interativo</a> (iMA) e
              <a class="text-info fw-bold"
                href='https://www.researchgate.net/publication/262370367_The_Six_Facets_of_Serious_Game_Design_A_Methodology_Enhanced_by_Our_Design_Pattern_Library'>
                Six facets of Serious Game Design</a> e segue sendo desenvolvido desde então.
            </p>
          </div>
        </section>
      </div>
      <div class="col-md-4 d-flex align-items-stretch">
        <section class="card shadow bg-primary text-white" id="desenvolvimento">
          <h4 class="card-title text-center mt-4">Desenvolvimento</h4>
          <hr class="text-white mx-4" />
          <div class="card-body">
            <!-- <p>Assim que o estudante finaliza o algoritmo, já consegue receber uma
              <i>retroação</i> imediata, informando se sua solução resolve ou não o problema proposto.
            </p> -->
            <p>
              Vem sendo desenvolvido para permitir <strong>ampla personalização</strong> dos jogos de forma que se
              adaptem
              às
              necessidades
              de cada usuário. Novos jogos são criados com ênfase em <strong>incentivar a cooperação</strong> ao invés
              da
              competitividade,
              visto que a última pode produzir condições adversas ao aprendizado. Além disso, dada a universalidade da
              matemática, é incentivada a internacionalização da ferramenta, que atualmente está <b>disponível em cinco
                idiomas:</b> espanhol, francês, inglês, italiano e português.
            </p>
          </div>
        </section>
      </div>
    </div>

    <!-- <hr class="my-4"> -->

    <!-- <section id="public alvo">
      <h2> Público alvo </h2>

      <ul>
        <li>
          <strong>Alunos</strong> desejando estudar diferentes assuntos de frações de forma aplicada;
        </li>
        <li>
          <strong>Professores/tutores</strong> participando do ensino de frações que tenham interesse em:
          <ul>
            <li>
              utilizar um jogo personalizavel como material auxiliar no ensino de um tópico específico no nível de
              dificuldade desejado.
            </li>
            <li>
              criar uma trilha com diferentes atividades em crescente grau de dificuldade de forma a guiar o aluno
              pelo
              processo de aprendizagem de vários conteúdos;
            </li>
          </ul>
        </li>
      </ul>
    </section> -->

    <!-- <hr class="my-4"> -->

    <!-- <section id="concepcao">
      <h2>Concepção</h2>
      <p>
        O projeto teve início em 2016 numa parceria entre os professores
        <a href='http://www.ime.usp.br/~leo'>Leônidas de Oliveira Brandão</a>
        (<a href='http://www.ime.usp.br'>IME-USP</a>) e
        <a href='https://users.dcc.uchile.cl/~mibarra/'>Manuel Ibarra</a>
        (EAPIIS-UNAMBA), baseado no
        <a href='https://matematica.br/iassign/index_pt.html'>Módulo de Aprendizado Interativo</a> (iMA) e
        <a
          href='https://www.researchgate.net/publication/262370367_The_Six_Facets_of_Serious_Game_Design_A_Methodology_Enhanced_by_Our_Design_Pattern_Library'>
          Six facets of Serious Game Design</a> e segue sendo desenvolvido desde então.
      </p>
    </section>
 -->

    <!-- <hr class="my-4"> -->

    <!-- <section id="desenvolvimento">
      <h2>Desenvolvimento</h2>
      <p>
        Vem sendo desenvolvido para permitir <strong>ampla personalização</strong> dos jogos de forma que se adaptem
        às
        necessidades
        de cada usuário. Novos jogos são criados com ênfase em <strong>incentivar a cooperação</strong> ao invés da
        competitividade,
        visto que a última pode produzir condições adversas ao aprendizado. Além disso, dada a universalidade da
        matemática, é incentivada a internacionalização da ferramenta, que atualmente está <b>disponível em cinco
          idiomas:</b> espanhol, francês, inglês, italiano e português.
      </p> -->
    <!--
      COOPERATION TEAM
      ----------------
      BRAZIL: Leônidas de Oliveira Brandão (IME-USP)
      PERU: Manuel Ibarra & Cristhian Serrano (EAPIIS-UNAMBA)
      FRANCE: Jean-Marc (MOCAH-UPMC)

      BASED ON
      ----------------
      iLM (interactive Learning Modules)
      Six facets of Serious Game Design:
      Pedagogical Objectives; Domain Simulation; Interactions with the Simulation; Problems and Progression; Decorum and Conditions of Use.

      TECHNOLOGY
      ----------------
      We used HTML5, CSS and the Javascript Library Phaser.io
      -->
    <!-- </section> -->

    <!-- <hr class="my-4"> -->

    <section class="pt-5" id="download">
      <h2>Onde encontrar</h2>
      <p>
        O iFrações faz parte da comunidade de <strong>software livre</strong>, usando a <a
          href='https://www.gnu.org/licenses/licenses.pt-br.html'>Licença Pública Geral GNU (GPLv3)</a>, possuindo
        código
        aberto que pode ser distribuido gratuitamente.
      </p>

      <p>Atualmente existem duas versões do iFrações disponíveis:</p>

      <div class="row">

        <div class="col-lg-6 mb-3 d-flex">
          <div class="card shadow">

            <img class="card-img-top" src="./assets/menu.png" alt="Card image cap">

            <div class="card-body">
              <h3 class="card-title">iFrações Web</h3>
              <p class="card-text">Esta versão pode ser usada no navegador livremente.</p>

              <h4>Links de desenvolvimento</h4>
              <ul class="list-unstyled">
                <li><a href='http://200.144.254.107/git/LInE/Ifractions-web/src/release-3.1.0'>Versão estável
                    (v3.1.0)</a></li>
                <li><a href='http://200.144.254.107/git/LInE/Ifractions-web/src/master'>Versão de desenvolvimento</a>
                </li>
              </ul>

              <div class="text-center">
                <a class="btn btn-primary" href="http://www.usp.br/line/ifractions" role="button" target="_blank">
                  Jogue Online Aqui
                </a>
              </div>
            </div>

          </div>
        </div>

        <div class="col-lg-6 mb-3 d-flex">
          <div class="card shadow">

            <img class="card-img-top" src="./assets/student-report.png" alt="Card image cap">

            <div class="card-body">
              <h3 class="card-title">iFrações Moodle</h3>
              <p class="card-text">Esta versão pode ser integrada a um ambiente <a href='https://moodle.org/'>Moodle</a>
                a partir do pacote <a href='https://www.matematica.br/ia/index_pt.html'>iTarefa</a>, aparecendo como
                um de seus Módulos de Atividade Interativos (iMA).
              </p>

              <h4>Links de desenvolvimento</h4>
              <ul class="list-unstyled">
                <li><a href='https://moodle.org/plugins/mod_iassign'>Versão estável (no site do Moodle)</a></li>
                <li><a href='http://200.144.254.107/git/LInE/iassign'>Versão de desenvolvimento</a></li>
              </ul>
            </div>

          </div>
        </div>

      </div>
    </section>

  </main>

  <!-- rodape -->
  <footer id='footer' class="container-flex mt-5 py-5 text-center"></footer>

</body>

<script src="./script/bootstrap/bootstrap.bundle.min.js"></script>
<script src="./script/bootstrap/bootstrap.esm.min.js"></script>
<script src="./script/index.js"></script>

</html>