Pular para Conteúdo Principal
ver itens de layout

Em construção

Obs:
Todos os objetos devem ser aplicados dentro de um .container.
Não é necessário que seja um .container exclusivo. Se você já estiver trabalhando dentro de um container, basta inserir o objeto no fluxo do conteúdo.

Cartão

Uma sequência de cartões deve ser inserida dentro do mesmo .cartao-wrapper, para que se disponham na mesma linha e apliquem o wrap quando necessário. Quando isso não for desejado, basta utilizar mais de um .cartao-wrapper.

A largura de cada cartão se ajusta entre 300px e 500px, dependendo da largura disponível.
O cartão possui altura mínima de 280px, mas ela se ajusta conforme tamanho do texto do verso. Neste caso, todos os cartões da mesma linha se ajustam para a maior altura.

Conceito

Texto de explicação sobre o conceito.

Cartão sem ícone

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit elit, commodo accumsan sodales at, tristique ultricies mi.

Cartão com textão

Exemplo de cartão com texto maior do que o cartão ao lado, fazendo com que a altura de ambos seja ajustada.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit elit, commodo accumsan sodales at, tristique ultricies mi. Quisque vestibulum lacus id lacus elementum, eget imperdiet urna tempor.

Cartão com textinho

Textinho de nada. 

CÓDIGO
<div class="cartao-wrapper">

  <div class="cartao">
    <div class="frente cartao-icone">
      <div>
        <!-- conteúdo frente -->
        <img src="endereço da imagem" alt="">
        <h6>
          <!-- Conceito -->
        </h6>
      </div>
    </div>
    <div class="tras">
      <div>
        <!-- conteúdo verso -->
        <p>
          <!-- Texto de explicação sobre o conceito. -->
        </p>
      </div>
    </div>
  </div>

</div>

Collapse

Utilizar um .novotec-collapse-wrapper para cada conjunto de elementos.
Cada div .card corresponde a um elemento completo.

Deve-se optar por collapse ao invés de accordion quando o conteúdo for muito extenso, evitando movimentação exagerada da tela.

Quanto vamos vender nos próximos meses? O orçamento de vendas tenta responder a essa pergunta: é a projeção de quanto a organização espera vender de cada produto num determinado período.

Uma vez definido o volume de vendas, é possível determinar quanto a organização terá que produzir todos os meses.

Se a organização tiver alguns produtos em estoque, precisará produzir o volume projetado de vendas que não possa ser atendido pelo que já está no estoque.

Uma vez definido o volume que é necessário produzir em cada mês, será possível definir quanto vai ser gasto com materiais para a produção nesse mesmo período. Imagine que, para fazer bolsas, seja necessário comprar tecido. No orçamento de materiais calcula-se, então, quanto se precisa de tecido para produzir o volume esperado.

CÓDIGO
<div class="novotec-collapse-wrapper">

<div class="card">
  <div class="card-header">
    <button class="btn collapsed" type="button" role="button" data-toggle="collapse" aria-expanded="false">
        <div>
          <!-- Seu conteúdo -->
        </div>
    </button>
  </div>
  <div class="collapse">
    <div class="card-body">
      <!-- Seu conteúdo -->
    </div>
  </div>
</div>

</div>

Accordion

A estrutura do accordion é idêntica à do collapse, bastando apenas adicionar a classe .accordion ao .novotec-collapse-wrapper para acionar essa funcionalidade.

O accordion é um conjunto de collapse em que a abertura de um novo elemento fecha os outros do mesmo conjunto.
Devido a esse comportamento, seu uso preferencialmente deve se restringir a objetos com conteúdo pequeno.
Em objetos de conteúdo extenso, a movimentação causada pelo fechamento automático pode desorientar o usuário, especialmente em telas menores, em que o conteúdo pode exceder a altura do viewport.

Quanto vamos vender nos próximos meses? O orçamento de vendas tenta responder a essa pergunta: é a projeção de quanto a organização espera vender de cada produto num determinado período.

Uma vez definido o volume de vendas, é possível determinar quanto a organização terá que produzir todos os meses.

Se a organização tiver alguns produtos em estoque, precisará produzir o volume projetado de vendas que não possa ser atendido pelo que já está no estoque.

Uma vez definido o volume que é necessário produzir em cada mês, será possível definir quanto vai ser gasto com materiais para a produção nesse mesmo período. Imagine que, para fazer bolsas, seja necessário comprar tecido. No orçamento de materiais calcula-se, então, quanto se precisa de tecido para produzir o volume esperado.

CÓDIGO
<div class="novotec-collapse-wrapper accordion">

<div class="card">
  <div class="card-header">
    <button class="btn collapsed" type="button" role="button" data-toggle="collapse" aria-expanded="false">
        <div>
          <!-- Seu conteúdo -->
        </div>
    </button>
  </div>
  <div class="collapse">
    <div class="card-body">
      <!-- Seu conteúdo -->
    </div>
  </div>
</div>

</div>

Carousel

Utilizar um .carousel-wrapper para cada carousel.
Cada .carousel-slide corresponde a um slide do carousel.

Tamanho do carousel

Caso seja necessário um carousel que não ocupe toda a largura do container, essa dimensão pode ser definida pelo max-width do .carousel-wrapper.

O carousel padroniza suas altura a partir do maior slide. A altura é limitada para que seja sempre possível manter todo o carousel e controles visíveis na tela.

Quando o conteúdo extrapola a altura máxima, a navegação se dá por scroll dentro do carousel. Nessas situações, no layout mobile, a margem direita é ampliada para permitir a rolagem independente da página e do carousel.

Porém, o carousel deve ser utilizado preferencialmente para conteúdos curtos. Apesar dos ajustes aplicados, a navegação por slides extensos, que excedam o tamanho da tela, não fornece uma boa experiência, especialmente em dispositivos móveis.

Carousel padrão

Slide com conteúdo curto

Slide com apenas uma imagem e uma legenda ou texto enxuto. Essa seria uma aplicação ideal de carousel.

Slide com mais texto

Este é um slide com mais texto, mas ainda não em volume que prejudique a navegação.

O ideal é que o tamanho do texto não seja muito maior do que este para manter uma boa experiência em dispositivos móveis. Embora o carousel se adapte a conteúdos maiores, o ideal é evitar essa situação.

Observe como a altura do carousel se ajusta ao maior slide: provavelmente o slide anterior quando a tela está na horizontal e este slide em telas menores e com orientação vertical.

Último slide

Este é o último slide. Observe que o botão de Próximo é desativado, impedindo que o carousel dê a volta. Isso também acontece com o botão de Anterior no primeiro slide. 

CÓDIGO
<div class="carousel-wrapper padrao">
  <!--Slide do Carousel -->
  <div class="carousel-slide">
    <!-- Seu conteúdo -->
  </div>
</div>

Modificadores do carousel

  • Carousel infinito: se desejar que o carousel seja infinito (permita navegação entre início e final), substitua a classe .padrao do .carousel-wrapper pela classe .infinito (ou seja class="carousel-wrapper infinito")

  • Transição: para retirar a transição entre slides, substitua a classe .padrao do .carousel-wrapper pela classe .car-fade (ou seja class="carousel-wrapper car-fade")

  • Carousel infinito sem transição: as duas opções anteriores podem ser combinadas substituindo a classe .padrao do .carousel-wrapper pela classe .infinito-fade (ou seja class="carousel-wrapper infinito-fade". Atenção: é uma nova classe – utilizar juntas as classes .infinito e .car-fade não funciona.)

  • Borda: é possível eliminar a borda aplicando a classe .borda-transparente ao .carousel-wrapper.

  • Alinhamento: por padrão, o alinhamento vertical dos carousel é superior. É possível centralizar verticalmente o conteúdo adicionando a classe .centro-vert ao .carousel-wrapper, para aplicar a todos os itens, ou a um .carousel-slide, se desejar centralizar somente um item específico.

1

Carousel com modificadores

  • Este carousel está sem transições e com navegação infinita (substituição da classe .padrao pela .infinito-fade no .carousel-wrapper)

  • Este carousel não possui bordas (classe .borda-transparente no .carousel-wrapper)

  • O conteúdo deste carousel está centralizado verticalmente (classe .centro-vert no .carousel-wrapper).

2

3

4

5

6

CÓDIGO
<div class="carousel-wrapper infinito-fade borda-transparente centro-vert">
  <!--Slide do Carousel -->
  <div class="carousel-slide">
    <!-- Seu conteúdo -->
  </div>
</div>

Outras funcionalidades

Este modelo de carousel foi construído utilizado o Slick. Consulte a documentação para explorar mais funcionalidades!

Caixa de conceitos

Deve ser utilizado um .conceitos-wrapper para cada conjunto de conceitos.
Cada div .conceitos-item corresponde a um conceito. Apenas o primeiro deve possuir a classe .ativo no botão e .show no .collapse.

A altura de todas as caixas do conjunto se ajusta à caixa de maior conteúdo, ou à altura total dos botões, caso esta seja maior.

Na versão mobile, esse objeto passa a funcionar como um collapse, evitando que o termo e sua explicação fiquem muito distantes.

Padrão

O veterano envolvido na organização do trote solidário, antes de tudo, está contribuindo com a inovação social e exercendo seu protagonismo e sua cidadania. Além disso, tem oportunidades de desenvolvimento pessoal e profissional, já que mobiliza competências como proatividade, liderança e trabalho em equipe, sem contar a possibilidade de estabelecer contatos profissionais por meio de parcerias.
O trote solidário é um momento muito marcante para o calouro, que encontra acolhimento na nova instituição, integração com os colegas e práticas inspiradoras para sua formação pessoal e profissional. Além disso, o contato com as necessidades da comunidade e a inovação social contribui para a formação de cidadãos mais críticos e engajados.
A universidade que apoia e desenvolve o trote solidário está no exercício de sua função social - que não se restringe à formação profissional de seus alunos, mas também envolve a formação humana e cidadã. Estimular o envolvimento de seus alunos nesse tipo de ação desperta-os para o empreendedorismo e o protagonismo social, além de contribuir para um dos pilares da universidade: a realização de atividades de extensão junto à comunidade.
A comunidade na qual a universidade está inserida é a beneficiária direta das ações do trote solidário, que podem impactar positivamente a vida das pessoas que ali vivem e também sua percepção sobre a universidade. 
CÓDIGO
<div class="conceitos-wrapper">

  <!-- Primeiro item -->
  <div class="conceitos-item">
    <button class="btn ativo" type="button"  aria-expanded="true">
    <!-- Nome do conceito -->
    </button>
    <div class="collapse show">
      <div>
        <!-- Explicação do conceito -->
      </div>
    </div>
  </div>

  <!-- Demais itens -->
  <div class="conceitos-item">
    <button class="btn" type="button"  aria-expanded="false">
    <!-- Nome do conceito -->
    </button>
    <div class="collapse">
      <div>
        <!-- Explicação do conceito -->
      </div>
    </div>
  </div>

</div>

Vertical

Para utilizar uma variação vertical, basta acrescentar a classe .conceitos-vertical ao .conceitos-wrapper.

O veterano envolvido na organização do trote solidário, antes de tudo, está contribuindo com a inovação social e exercendo seu protagonismo e sua cidadania. Além disso, tem oportunidades de desenvolvimento pessoal e profissional, já que mobiliza competências como proatividade, liderança e trabalho em equipe, sem contar a possibilidade de estabelecer contatos profissionais por meio de parcerias.
O trote solidário é um momento muito marcante para o calouro, que encontra acolhimento na nova instituição, integração com os colegas e práticas inspiradoras para sua formação pessoal e profissional. Além disso, o contato com as necessidades da comunidade e a inovação social contribui para a formação de cidadãos mais críticos e engajados.
A universidade que apoia e desenvolve o trote solidário está no exercício de sua função social - que não se restringe à formação profissional de seus alunos, mas também envolve a formação humana e cidadã. Estimular o envolvimento de seus alunos nesse tipo de ação desperta-os para o empreendedorismo e o protagonismo social, além de contribuir para um dos pilares da universidade: a realização de atividades de extensão junto à comunidade.
A comunidade na qual a universidade está inserida é a beneficiária direta das ações do trote solidário, que podem impactar positivamente a vida das pessoas que ali vivem e também sua percepção sobre a universidade. 
CÓDIGO
<div class="conceitos-wrapper conceitos-vertical">

  <!-- Primeiro item -->
  <div class="conceitos-item">
    <button class="btn ativo" type="button"  aria-expanded="true">
    <!-- Nome do conceito -->
    </button>
    <div class="collapse show">
      <div>
        <!-- Explicação do conceito -->
      </div>
    </div>
  </div>

  <!-- Demais itens -->
  <div class="conceitos-item">
    <button class="btn" type="button"  aria-expanded="false">
    <!-- Nome do conceito -->
    </button>
    <div class="collapse">
      <div>
        <!-- Explicação do conceito -->
      </div>
    </div>
  </div>

</div>

Duas colunas

Quando houver uma quantidade muito grande de itens, pode ser adotado o layout com duas colunas.
Nessa aplicação, além da classe .conceitos-colunas no .conceitos-wrapper, também são utilizadas duas divs para a divisão dos itens entre as colunas.

A receita é igual ao preço de venda dos produtos multiplicado pelo total de produtos vendidos.
A organização pode ter alguma venda cancelada, ou devoluções. Essas devem ser deduzidas, ou seja, retiradas das receitas
Existem vários impostos que incidem sobre a receita: ISS, PIS, Cofins, e também ICMS e IPI, no caso de venda de produtos. IR e CSLL incidem sobre a receita bruta no caso do recolhimento sobre o lucro presumido.
É igual à receita bruta, menos as deduções das vendas, menos os impostos incidentes sobre a receita.
Salários e comissões dos vendedores e outras despesas liadas ao esforço de vendas.
Salários do pessoal administrativo, material de escritório, serviço de manutenção do escritório.
São as despesas com juros, por empréstimos e financiamentos.
Não correspondem propriamente a uma saída de dinheiro. São uma provisão para futuras necessidades de reposição do capital imobilizado da empresa, que sofrerá desgaste com o uso e com o tempo. Veja mais detalhes sobre depreciação ao final dessa tabela. 
CÓDIGO
<div class="conceitos-wrapper conceitos-colunas">

  <!-- Primeira coluna -->
  <div class="conceitos-col-1">

    <!-- Primeiro item -->
    <div class="conceitos-item">
      <button class="btn ativo" type="button"  aria-expanded="true">
        <!-- Nome do conceito -->
      </button>
      <div class="collapse show">
        <div>
          <!-- Explicação do conceito -->
        </div>
      </div>
    </div>

    <!-- Demais itens -->
    <div class="conceitos-item">
      <button class="btn" type="button"  aria-expanded="false">
        <!-- Nome do conceito -->
      </button>
      <div class="collapse">
        <div>
          <!-- Explicação do conceito -->
        </div>
      </div>
    </div>

  </div>

  <!-- Segunda coluna -->
  <div class="conceitos-col-2">

    <!-- Item -->
    <div class="conceitos-item">
      <button class="btn" type="button" >
        <!-- Nome do conceito -->
      </button>
      <div class="collapse">
        <div>
          <!-- Explicação do conceito -->
        </div>
      </div>
    </div>

  </div>

</div>

Menu circular

Este é um menu circular

    • Clique nos botões
Entrevistas

Ouvir as pessoas da comunidade e das instituições locais pode ajudar a traçar o perfil e as necessidades desse público. A entrevista também abre possibilidades de ampliar as perguntas iniciais e perceber também aspectos mais subjetivos das pessoas (como reações, postura, tom de voz etc.).

Pesquisa histórico-documental

Você pode consultar documentos oficiais (como o Censo do IBGE, por exemplo), a imprensa e a História do bairro para coletar dados sobre a comunidade. Falar com moradores que vivem há muito tempo no local também pode ser esclarecedor.

Questionários

Fazer e distribuir questionários para mapear as condições da comunidade pode ser uma boa alternativa. Apesar de não permitirem o “olho no olho” das entrevistas, questionários têm maior alcance, o que pode ajudá-lo a conseguir uma amostra maior de respostas.