magica.html

---
layout: default
title: Web Software Development
description: HE:labs é uma empresa pioneira em desenvolvimento de sistemas web, aplicativos web, SaaS e Cloud Computing.
en: /en/magic/
---

<div class="main">

  <div id="cover-banner">
    <div class="containner">
      <h2>Metodologia</h2>
      <p>Trabalhamos em ciclos iterativos e entregas semanais</p>
    </div>
  </div> <!-- /cover-banner -->

  <section id="process">
    <div class="containner">
      <section id="process-info">
        <img src="/images/process-info.jpg">
        <div class="proc-desc-01">
          <a href="#monday">
            <span>1</span>
            <p>O Cliente apresenta sua idéia inicial</p>
          </a>
        </div>
        <div class="proc-desc-02">
          <a href="#monday">
            <span>2</span>
            <p>Todos desenham as telas do app</p>
          </a>
        </div>
        <div class="proc-desc-03">
          <a href="#monday">
            <span>3</span>
            <p>Fazemos a priorização das tarefas</p>
          </a>
        </div>
        <div class="proc-desc-04">
          <a href="#tuesday-wednesday">
            <span>4</span>
            <p>Desenvolvimento e design pesado</p>
          </a>
        </div>
        <div class="proc-desc-05">
          <a href="#thursday">
            <span>5</span>
            <p>Ajustes e entrega</p>
          </a>
        </div>
        <div class="proc-desc-06">
          <a href="#friday">
            <span>6</span>
            <p>Execução do roteiro de testes pelo cliente</p>
          </a>
        </div>
      </section> <!-- /process-info -->
    </div>
  </section>

  <section id="process-entry">
    <div class="containner">
      <div class="process-column">
        <h3 id="monday">Segunda-feira</h3>
        <ul>
          <li>
            <h4>Ideia do cliente</h4>
            No primeiro encontro, cliente e time conversam sobre o projeto e suas visões de curto e longo prazo.
          </li>
          <li>
            <h4>Desenho das telas</h4>
            Cliente e time desenham as páginas como imaginam que o projeto será desenvolvido.
            <div class="hide-content">
              <a class="show-more" title="Saiba mais sobre desenho das telas"><i class="fa fa-plus-circle"></i></a>
              <div class="show-content">
                <p>O objetivo desta etapa é extrair as principais ideias de todos (cliente e time) e através da comunicação, chegar ao acordo do que precisa ser feito.</p>
                <p>Quando falamos desenho das telas, queremos dizer que é feito, literalmente, um desenho do que você imagina como será a sua página. Simples, com papel e caneta. <a href="/pdfs/exemplo-de-desenho.pdf" rel="external"  data-no-instant>Veja um exemplo!</a></p>
                <div class="modalEntry">
                  <p><strong>1.</strong> Todos do time e o cliente desenham, individualmente, as interfaces das telas imaginadas;</p>
                  <p><strong>2.</strong> Os desenhos devem refletir os fluxos das telas da aplicação. Como deve ser a interação do usuário com ela, quais elementos devem existir e tudo mais;</p>
                  <p><strong>3.</strong> Todos apresentam seus desenhos e há a discussão sobre as melhores telas;</p>
                  <p><strong>4.</strong> Cria-se o desenho final, que será o documento de entrada para a próxima etapa.</p>
                </div>
              </div>
            </div>
          </li>
          <li>
            <h4>Quebra de tarefas e estimativa</h4>
            O time dissolve o desenho final das telas em tarefas de design e programação, atribuindo uma estimativa individual.
            <div class="hide-content">
              <a class="show-more" title="Saiba mais sobre quebra de tarefas e estimativa"><i class="fa fa-plus-circle"></i></a>
              <div class="show-content">
                <p>O principal objetivo aqui é saber qual e quanto esforço será necessário para o seu desenvolvimento.</p>
                <div class="modalEntry">
                  <p><strong>1.</strong> Após o time discutir as telas desenhadas, cria-se um passo-a-passo dos detalhes de cada tela. Chamamos este de "histórias", onde dentro de cada uma, há várias tarefas;</p>
                  <p><strong>2.</strong> Na sala onde o time se encontra, é desenhado no quadro-branco os componentes necessários para criar cada uma das telas;</p>
                  <p><strong>3.</strong> Cada tarefa tem um valor x de pontos. Todos do time estipulam as pontuações de cada uma das tarefas;</p>
                  <p><strong>4.</strong> A pontuação é sempre 1, 2, 4 ou 8, que representam o esforço do time em relação a tal tarefa;</p>
                </div>
              </div>
            </div>
         </li>
          <li>
          <h4>Priorização das tarefas</h4>
            O cliente prioriza as tarefas que serão realizadas durante a semana.
            <div class="hide-content">
              <a class="show-more" title="Saiba mais sobre priorização das tarefas"><i class="fa fa-plus-circle"></i></a>
              <div class="show-content">
                <p>Depois de se saber o valor de esforço de cada uma das tarefas, é hora de priorizá-las, definindo quais delas são mais importantes para serem desenvolvidas durante a semana.</p>
                <div class="modalEntry">
                  <p><strong>1.</strong> O cliente coloca em ordem de prioridade todas as tarefas, independentemente dos pontos;</p>
                  <p><strong>2.</strong> O time ajuda o cliente a priorizar, mostrando a complexidade de cada uma das tarefas;</p>
                  <p><strong>3.</strong> O cliente prioriza em média 30 pontos por pessoa no time. Ou seja, um time com 2 pessoas, entrega, aproximadamente, 60 pontos;</p>
                  <p><strong>4.</strong> Ao final da priorização, o cliente e o time já sabem o que será desenvolvido durante a semana;</p>
                </div>
              </div>
            </div>
         </li>
        </ul>
      </div> <!-- /process-column -->

      <div class="process-column">
        <h3 id="tuesday-wednesday">Terça e Quarta-feira</h3>
        <ul>
          <li>
            <h4>Desenvolvimento</h4>
            O time trabalha nas tarefas priorizadas pelo cliente.
            <div class="hide-content">
              <a class="show-more" title="Saiba mais sobre terça e quarta-feira"><i class="fa fa-plus-circle"></i></a>
              <div class="show-content">
                <p>No desenvolvimento, o time começa a fazer as tarefas que foram definidas na segunda-feira.</p>
                <iframe class="video" src="//www.youtube.com/embed/6KuOCJtfB9Q" frameborder="0" allowfullscreen></iframe>
                <div class="modalEntry">
                  <p><strong>1.</strong> O time sempre está em comunicação entre si, assim todos sabem como está o andamento do projeto;</p>
                  <p><strong>2.</strong> O código do projeto é alterado por todos do time. Assim, todos possuem conhecimento completo do sistema;</p>
                  <p><strong>3.</strong> Não se preocupe! Seu time estará se divertindo desenvolvendo seu projeto enquanto comem biscoitinhos e bebem Red Bull;</p>
                </div>
              </div>
            </div>
          </li>
          <li>
            <h4>Ambiente de testes</h4>
            O projeto que está em desenvolvimento fica disponível para o cliente em um ambiente de testes online.
            <div class="hide-content">
              <a class="show-more" title="Saiba mais sobre ambiente de testes"><i class="fa fa-plus-circle"></i></a>
              <div class="show-content">
                <p>Todo projeto possui um ambiente de testes, chamado de staging. Ele funciona online para que o cliente e o time realizem testes em um ambiente mais próximo do que está em produção.</p>
                <div class="modalEntry">
                  <p><strong>1.</strong> O ambiente de staging é protegido com login e senha para que somente as pessoas autorizadas tenham acesso;</p>
                </div>
              </div>
            </div>
          </li>
          <li>
            <h4>Boas práticas</h4>
            O time utiliza testes automatizados e todas as demais práticas do XP (Xtreme Programming - Metodologia ágil).
            <div class="hide-content">
              <a class="show-more" title="Saiba mais sobre boas práticas"><i class="fa fa-plus-circle"></i></a>
              <div class="show-content">
                <p>O time de desenvolvimento utiliza diversas boas práticas, dentre elas:  testes automatizados, 100% de cobertura e integração contínua.</p>
                <div class="modalEntry">
                  <p><strong>1.</strong> Todo código escrito já foi um teste para ter garantia de seu funcionamento. Assim, novas funcionalidades não afetam as antigas;</p>
                  <p><strong>2.</strong> Temos que testar tudo! Após isto, garantimos 100% a cobertura de seus testes. Ou seja, não há uma linha de código sequer que não tenha sido testada;</p>
                  <p><strong>3.</strong> Toda pequena porção de código desenvolvido é enviado para o ambiente de staging, ocorrendo diversas vezes por dia este processo, garantindo que não haja nenhuma surpresa no ambiente de produção.</p>
                </div>
              </div>
            </div>
         </li>
        </ul>
      </div> <!-- /process-column -->

      <div class="process-column">
        <h3 id="thursday">Quinta-feira</h3>
        <ul>
          <li>
            <h4>Finalização do desenvolvimento</h4>
            Na quinta-feira, todas as tarefas priorizadas na segunda-feira são finalizadas e estarão disponíveis no ambiente de staging.
         </li>
          <li>
            <h4>Roteiro de testes</h4>
            No final do dia, é entregue o roteiro de testes para o cliente.
            <div class="hide-content">
              <a class="show-more" title="Saiba mais sobre roteiro de testes"><i class="fa fa-plus-circle"></i></a>
              <div class="show-content">
                <p>Com a finalização do desenvolvimento na quinta-feira, o cliente é notificado e recebe um <b>roteiro de testes</b> para testar todo o sistema.</p>
                <div class="modalEntry">
                  <p><strong>1.</strong> O roteiro de testes é um passo-a-passo de como testar cada uma das funcionalidades, feito diretamente no <b>ambiente de testes</b>;</p>
                  <p><strong>2.</strong> O cliente anota qualquer observação sobre a entrega feita diretamente no roteiro de testes;</p>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div> <!-- /process-column -->

      <div class="process-column">
        <h3 id="friday">Sexta-feira</h3>
        <ul>
          <li>
            <h4>Testando o sistema</h4>
            O cliente usa este dia para testar o sistema, seguindo o roteiro de testes do que foi desenvolvido e anota as suas observações para a próxima reunião, na segunda-feira seguinte.
          </li>
          <li>
            <h4>Projetos internos e Open Source</h4>
            Enquanto o cliente faz os testes no sistema, a equipe trabalha em projetos internos da empresa, contribui para projetos <a href="/opensource/">open source</a>, faz posts para o <a href="http://helabs.com.br/blog/" data-no-instant>blog</a> e também workshops e outras formas de aprimoramento técnico.
          </li>
          <li>
            <h4>Cerveja e Red Bull</h4>
            Enquanto a galera trabalha nos projetos internos e em projetos open source, é liberado cerveja, Red Bull e refrigerante! Tudo por conta da empresa! =)
          </li>
        </ul>
      </div> <!-- /process-column -->
    </div>
  </section> <!-- /process-entry -->

  <div class="bottom-nav">
    <a class="red-button" href="/nosso-time/">
      Conheça nosso time
    </a>
  </div>

  <script type="text/javascript">
    mixpanel.track_links(".red-button", "Clicked - Conheça nossos clientes");
  </script>

</div>