Horizontal Timeline with Swiper

January 2017
Gathering Information
February 2017
Planning
March 2017
Design
April 2017
Content Writing and Assembly
May 2017
Coding
June 2017
Testing, Review & Launch
July 2017
Maintenance

Tooltip

Exibir tooltip <span data-toggle="tooltip" data-placement="top" title='Texto para <i>exibir</i> no tooltip'>Exibir tooltip</span>

Lista sem numeração

  • Item 1
  • Item 1
  • Item 1
<ul> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> </ul>

Negrito

Texto em negrito <strong>Texto em negrito</strong>

Itálico

Texto em itálico <em>Texto em itálico</em>

Links

Exemplo de texto com link <a href="https://www.enderecodosite.com" target="_blank">Exemplo de texto com link</a>

Parágrafos

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

Títulos e subtítulos (H2 e H5)

<h2>O que é:</h2> <h2>Como fazer?</h2> <h5> Etapa 1 </h5> <h5> Etapa 2 </h5>

Imagem Full

Substituir o nome_da_imagem pelo nome da imagem correto e verificar a extensão que pode ser .jpg ou .png Observação importante: Remover a barra / antes de anexos para que fique dessa forma: images/area/nome_da_imagem.jpg Código para anos finais: <div class="praticas-img"> <img src="/images/EF-AF_imagens/nome_da_imagem.jpg"> </div> Código para anos iniciais: <div class="praticas-img"> <img src="/images/EF-AI_imagens/nome_da_imagem.jpg"> </div> Código para educação infantil: <div class="praticas-img"> <img src="/images/EI_imagens/nome_da_imagem.jpg"> </div> Código para ensino médio: <div class="praticas-img"> <img src="/images/EM_imagens/nome_da_imagem.jpg"> </div>

Bloco 1

Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante.
<div class="praticas-bloco1"> Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. </div>

Bloco 2

Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat.
Substituir o nome_da_imagem pelo nome da imagem correto e verificar a extensão que pode ser .jpg ou .png Observação importante: Remover a barra / antes de anexos para que fique dessa forma: images/area/nome_da_imagem.jpg Código para anos finais: <div class="praticas-bloco2"> <img src="/images/EF-AF_imagens/nome_da_imagem.jpg"> Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat. </div> Código para anos iniciais: <div class="praticas-bloco2"> <img src="/images/EF-AI_imagens/nome_da_imagem.jpg"> Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat. </div> Código para educação infantil: <div class="praticas-bloco2"> <img src="/images/EI_imagens/nome_da_imagem.jpg"> Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat. </div> Código para ensino médio: <div class="praticas-bloco2"> <img src="/images/EM_imagens/nome_da_imagem.jpg"> Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat. </div>

Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum diam vel eros fermentum euismod. Pellentesque eu condimentum libero. Duis vel diam venenatis, interdum ipsum eu, eleifend ante. Cras lobortis sapien sit amet dignissim ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque porta est vel iaculis pretium. Phasellus pretium efficitur urna feugiat accumsan.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum diam vel eros fermentum euismod. Pellentesque eu condimentum libero. Duis vel diam venenatis, interdum ipsum eu, eleifend ante. Cras lobortis sapien sit amet dignissim ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque porta est vel iaculis pretium. Phasellus pretium efficitur urna feugiat accumsan.
<div class="praticas-accordion"> <button class="accordion"><span class="accordion-title">Lorem ipsum</span></button> <div class="panel"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum diam vel eros fermentum euismod. Pellentesque eu condimentum libero. Duis vel diam venenatis, interdum ipsum eu, eleifend ante. Cras lobortis sapien sit amet dignissim ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque porta est vel iaculis pretium. Phasellus pretium efficitur urna feugiat accumsan. </div> <button class="accordion"><span class="accordion-title">Lorem ipsum</span></button> <div class="panel"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum diam vel eros fermentum euismod. Pellentesque eu condimentum libero. Duis vel diam venenatis, interdum ipsum eu, eleifend ante. Cras lobortis sapien sit amet dignissim ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque porta est vel iaculis pretium. Phasellus pretium efficitur urna feugiat accumsan. </div> </div>

Olho

Outras questões importantes também se destacaram, dentre elas, a percepção de melhora na escrita e o desenvolvimento do hábito da leitura.
<div class="praticas-olho"> Outras questões importantes também se destacaram, dentre elas, a percepção de melhora na escrita e o desenvolvimento do hábito da leitura. </div>

Olho a direita

Outras questões importantes também se destacaram, dentre elas, a percepção de melhora na escrita e o desenvolvimento do hábito da leitura.
<div class="praticas-olho float-right"> Outras questões importantes também se destacaram, dentre elas, a percepção de melhora na escrita e o desenvolvimento do hábito da leitura. </div>

Vídeo

A prática transformou aulas meramente expositivas num projeto de estudo mais dinâmico, com passeio à biblioteca, realização de palestras, uso de tecnologias digitais para pesquisa e elaboração de materiais e contextualização da história.

<iframe width="100%" height="360" src="https://www.youtube.com/embed/ELQ2azcQC9Q" frameborder="0" ;="" encrypted-media="" allowfullscreen=""></iframe> <div class="praticas-video-descricao"> <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in nibh posuere, porttitor mi et, porttitor libero. </p> </div>

Aba Horizontal

Content 1

Content 2

Content 3

Content 4

Content 5

Content 6

Content 7

Content 8

Content 9

Content 10

<div class="praticas-aba-horizontal"> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="pills-aba1-tab" data-toggle="pill" href="#pills-aba1" role="tab" aria-controls="pills-aba1" aria-selected="true">Aba 1</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-aba2-tab" data-toggle="pill" href="#pills-aba2" role="tab" aria-controls="pills-aba2" aria-selected="false">Aba 2</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-aba3-tab" data-toggle="pill" href="#pills-aba3" role="tab" aria-controls="pills-aba3" aria-selected="false">Aba 3</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-aba4-tab" data-toggle="pill" href="#pills-aba4" role="tab" aria-controls="pills-aba4" aria-selected="false">Aba 4</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-aba5-tab" data-toggle="pill" href="#pills-aba5" role="tab" aria-controls="pills-aba5" aria-selected="false">Aba 5</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-aba6-tab" data-toggle="pill" href="#pills-aba6" role="tab" aria-controls="pills-aba6" aria-selected="false">Aba 6</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-aba7-tab" data-toggle="pill" href="#pills-aba7" role="tab" aria-controls="pills-aba7" aria-selected="false">Aba 7</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-aba8-tab" data-toggle="pill" href="#pills-aba8" role="tab" aria-controls="pills-aba8" aria-selected="false">Aba 8</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-aba9-tab" data-toggle="pill" href="#pills-aba9" role="tab" aria-controls="pills-aba9" aria-selected="false">Aba 9</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-aba10-tab" data-toggle="pill" href="#pills-aba10" role="tab" aria-controls="pills-aba10" aria-selected="false">Aba 10</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-aba1" role="tabpanel" aria-labelledby="pills-aba1-tab"> <p>Content 1</p> </div> <div class="tab-pane fade" id="pills-aba2" role="tabpanel" aria-labelledby="pills-aba2-tab"> <p>Content 2</p> </div> <div class="tab-pane fade" id="pills-aba3" role="tabpanel" aria-labelledby="pills-aba3-tab"> <p>Content 3</p> </div> <div class="tab-pane fade" id="pills-aba4" role="tabpanel" aria-labelledby="pills-aba4-tab"> <p>Content 4</p> </div> <div class="tab-pane fade" id="pills-aba5" role="tabpanel" aria-labelledby="pills-aba5-tab"> <p>Content 5</p> </div> <div class="tab-pane fade" id="pills-aba6" role="tabpanel" aria-labelledby="pills-aba6-tab"> <p>Content 6</p> </div> <div class="tab-pane fade" id="pills-aba7" role="tabpanel" aria-labelledby="pills-aba7-tab"> <p>Content 7</p> </div> <div class="tab-pane fade" id="pills-aba8" role="tabpanel" aria-labelledby="pills-aba8-tab"> <p>Content 8</p> </div> <div class="tab-pane fade" id="pills-aba9" role="tabpanel" aria-labelledby="pills-aba9-tab"> <p>Content 9</p> </div> <div class="tab-pane fade" id="pills-aba10" role="tabpanel" aria-labelledby="pills-aba10-tab"> <p>Content 10</p> </div> </div> </div>

Aba Vertical

Content 1

Content 2

Content 3

Content 4

Content 5

Content 6

Content 7

Content 8

Content 9

Content 10

<div class="praticas-aba-vertical"> <div class="row"> <div class="col-sm-12 col-md-3"> <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> <a class="nav-link active" id="v-pills-aba1-tab" data-toggle="pill" href="#v-pills-aba1" role="tab" aria-controls="v-pills-aba1" aria-selected="true">Aba 1</a> <a class="nav-link" id="v-pills-aba2-tab" data-toggle="pill" href="#v-pills-aba2" role="tab" aria-controls="v-pills-aba2" aria-selected="false">Aba 2</a> <a class="nav-link" id="v-pills-aba3-tab" data-toggle="pill" href="#v-pills-aba3" role="tab" aria-controls="v-pills-aba3" aria-selected="false">Aba 3</a> <a class="nav-link" id="v-pills-aba4-tab" data-toggle="pill" href="#v-pills-aba4" role="tab" aria-controls="v-pills-aba4" aria-selected="false">Aba 4</a> <a class="nav-link" id="v-pills-aba5-tab" data-toggle="pill" href="#v-pills-aba5" role="tab" aria-controls="v-pills-aba5" aria-selected="false">Aba 5</a> <a class="nav-link" id="v-pills-aba6-tab" data-toggle="pill" href="#v-pills-aba6" role="tab" aria-controls="v-pills-aba6" aria-selected="false">Aba 6</a> <a class="nav-link" id="v-pills-aba7-tab" data-toggle="pill" href="#v-pills-aba7" role="tab" aria-controls="v-pills-aba7" aria-selected="false">Aba 7</a> <a class="nav-link" id="v-pills-aba8-tab" data-toggle="pill" href="#v-pills-aba8" role="tab" aria-controls="v-pills-aba8" aria-selected="false">Aba 8</a> <a class="nav-link" id="v-pills-aba9-tab" data-toggle="pill" href="#v-pills-aba9" role="tab" aria-controls="v-pills-aba9" aria-selected="false">Aba 9</a> <a class="nav-link" id="v-pills-aba10-tab" data-toggle="pill" href="#v-pills-aba10" role="tab" aria-controls="v-pills-aba10" aria-selected="false">Aba 10</a> </div> </div> <div class="col-sm-12 col-md-9"> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-aba1" role="tabpanel" aria-labelledby="v-pills-aba1-tab"> <p>Content 1</p> </div> <div class="tab-pane fade" id="v-pills-aba2" role="tabpanel" aria-labelledby="v-pills-aba2-tab"> <p>Content 2</p> </div> <div class="tab-pane fade" id="v-pills-aba3" role="tabpanel" aria-labelledby="v-pills-aba3-tab"> <p>Content 3</p> </div> <div class="tab-pane fade" id="v-pills-aba4" role="tabpanel" aria-labelledby="v-pills-aba4-tab"> <p>Content 4</p> </div> <div class="tab-pane fade" id="v-pills-aba5" role="tabpanel" aria-labelledby="v-pills-aba5-tab"> <p>Content 5</p> </div> <div class="tab-pane fade" id="v-pills-aba6" role="tabpanel" aria-labelledby="v-pills-aba6-tab"> <p>Content 6</p> </div> <div class="tab-pane fade" id="v-pills-aba7" role="tabpanel" aria-labelledby="v-pills-aba7-tab"> <p>Content 7</p> </div> <div class="tab-pane fade" id="v-pills-aba8" role="tabpanel" aria-labelledby="v-pills-aba8-tab"> <p>Content 8</p> </div> <div class="tab-pane fade" id="v-pills-aba9" role="tabpanel" aria-labelledby="v-pills-aba9-tab"> <p>Content 9</p> </div> <div class="tab-pane fade" id="v-pills-aba10" role="tabpanel" aria-labelledby="v-pills-aba10-tab"> <p>Content 10</p> </div> </div> </div> </div> </div>

Citação

Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat. Nulla in condimentum dui. Nulla id nunc fringilla, aliquam risus at, posuere felis. Pellentesque ipsum augue, elementum nec purus vel, dignissim facilisis risus. Praesent sed faucibus leo, at mollis elit. Sed facilisis velit id velit bibendum venenatis.

<p class="citacao"> Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat. Nulla in condimentum dui. Nulla id nunc fringilla, aliquam risus at, posuere felis. Pellentesque ipsum augue, elementum nec purus vel, dignissim facilisis risus. Praesent sed faucibus leo, at mollis elit. Sed facilisis velit id velit bibendum venenatis. </p>

Lista numerada

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse egestas tristique ante fringilla viverra. Maecenas sit amet vulputate purus.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse egestas tristique ante fringilla viverra. Maecenas sit amet vulputate purus.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse egestas tristique ante fringilla viverra. Maecenas sit amet vulputate purus.
<div class="praticas-lista"> <ol> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse egestas tristique ante fringilla viverra. Maecenas sit amet vulputate purus.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse egestas tristique ante fringilla viverra. Maecenas sit amet vulputate purus.</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse egestas tristique ante fringilla viverra. Maecenas sit amet vulputate purus.</li> </ol> </div>

Imagens 3 colunas

Substituir o nome_da_imagem pelo nome da imagem correto e verificar a extensão que pode ser .jpg ou .png Observação importante: Remover a barra / antes de anexos para que fique dessa forma: images/area/nome_da_imagem.jpg Código para anos finais: <div class="praticas-imagens-horizontal"> <div class="col-md-4 col-sm-12"> <img src="/images/EF-AF_imagens/nome_da_imagem.jpg"> </div> <div class="col-md-4 col-sm-12"> <img src="/images/EF-AF_imagens/nome_da_imagem.jpg"> </div> <div class="col-md-4 col-sm-12"> <img src="/images/EF-AF_imagens/nome_da_imagem.jpg"> </div> </div> Código para anos iniciais: <div class="praticas-imagens-horizontal"> <div class="col-md-4 col-sm-12"> <img src="/images/EF-AI_imagens/nome_da_imagem.jpg"> </div> <div class="col-md-4 col-sm-12"> <img src="/images/EF-AI_imagens/nome_da_imagem.jpg"> </div> <div class="col-md-4 col-sm-12"> <img src="/images/EF-AI_imagens/nome_da_imagem.jpg"> </div> </div> Código para educação infantil <div class="praticas-imagens-horizontal"> <div class="col-md-4 col-sm-12"> <img src="/images/EI_imagens/nome_da_imagem.jpg"> </div> <div class="col-md-4 col-sm-12"> <img src="/images/EI_imagens/nome_da_imagem.jpg"> </div> <div class="col-md-4 col-sm-12"> <img src="/images/EI_imagens/nome_da_imagem.jpg"> </div> </div> Código para ensino médio <div class="praticas-imagens-horizontal"> <div class="col-md-4 col-sm-12"> <img src="/images/EM_imagens/nome_da_imagem.jpg"> </div> <div class="col-md-4 col-sm-12"> <img src="/images/EM_imagens/nome_da_imagem.jpg"> </div> <div class="col-md-4 col-sm-12"> <img src="/images/EM_imagens/nome_da_imagem.jpg"> </div> </div>

Tarja com conteúdo

Saiba mais

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse egestas tristique ante fringilla viverra. Maecenas sit amet vulputate purus. Quisque ut nulla pharetra, tempus turpis ut, pretium nulla. Nam ullamcorper sem nec eleifend convallis. Donec non commodo purus, a luctus quam. Mauris a arcu at risus suscipit blandit.
<div class="praticas-tarja"> <div class="col-md-12"> <div class="panel-custom"> <div class="panel-heading-custom"> <span class="pull-left tarja-icon"><i class="fa fa-eye fa-2x"></i></span><h3 class="panel-title-custom">Saiba mais</h3> </div> <div class="panel-body-custom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse egestas tristique ante fringilla viverra. Maecenas sit amet vulputate purus. Quisque ut nulla pharetra, tempus turpis ut, pretium nulla. Nam ullamcorper sem nec eleifend convallis. Donec non commodo purus, a luctus quam. Mauris a arcu at risus suscipit blandit.</div> </div> </div> </div>

Box de dicas

Dicas

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse egestas tristique ante fringilla viverra. Maecenas sit amet vulputate purus. Quisque ut nulla pharetra, tempus turpis ut, pretium nulla. Nam ullamcorper sem nec eleifend convallis. Donec non commodo purus, a luctus quam. Mauris a arcu at risus suscipit blandit.
<div class="praticas-tarja"> <div class="col-md-12"> <div class="panel-custom"> <div class="panel-heading-custom"> <span class="pull-left tarja-icon"><i class="fa fa-info fa-2x"></i></span><h3 class="panel-title-custom">Dicas</h3> </div> <div class="panel-body-custom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse egestas tristique ante fringilla viverra. Maecenas sit amet vulputate purus. Quisque ut nulla pharetra, tempus turpis ut, pretium nulla. Nam ullamcorper sem nec eleifend convallis. Donec non commodo purus, a luctus quam. Mauris a arcu at risus suscipit blandit.</div> </div> </div> </div>

Tarja sem conteúdo

Outras idéias

<div class="praticas-tarja"> <div class="col-md-12"> <div class="panel-custom"> <div class="panel-heading-custom"> <span class="pull-left tarja-icon-ideia"><i class="fa fa-lightbulb-o fa-2x"></i></span><h3 class="panel-title-custom">Outras idéias</h3> </div> </div> </div> </div>

Imagem a esquerda

Substituir o nome_da_imagem pelo nome da imagem correto e verificar a extensão que pode ser .jpg ou .png Observação importante: Remover a barra / antes de anexos para que fique dessa forma: images/area/nome_da_imagem.jpg Código para anos finais: <div class="praticas-img-50-left"> <img src="/images/EF-AF_imagens/nome_da_imagem.jpg"> </div> Código para anos iniciais <div class="praticas-img-50-left"> <img src="/images/EF-AI_imagens/nome_da_imagem.jpg"> </div> Código para educação infantil <div class="praticas-img-50-left"> <img src="/images/EI_imagens/nome_da_imagem.jpg"> </div> Código para ensino médio <div class="praticas-img-50-left"> <img src="/images/EM_imagens/nome_da_imagem.jpg"> </div>

Imagem a direita

Substituir o nome_da_imagem pelo nome da imagem correto e verificar a extensão que pode ser .jpg ou .png Observação importante: Remover a barra / antes de anexos para que fique dessa forma: images/area/nome_da_imagem.jpg Código para anos finais: <div class="praticas-img-50-right"> <img src="/images/EF-AF_imagens/nome_da_imagem.jpg"> </div> Código para anos iniciais <div class="praticas-img-50-right"> <img src="/images/EF-AI_imagens/nome_da_imagem.jpg"> </div> Código para educação infantil <div class="praticas-img-50-right"> <img src="/images/EI_imagens/nome_da_imagem.jpg"> </div> Código para ensino médio <div class="praticas-img-50-right"> <img src="/images/EM_imagens/nome_da_imagem.jpg"> </div>

Tabelas

ATIVIDADE RESPONSÁVEIS COMO QUANDO
Observação da área Comunidade escolar Visitas in loco Março de 2018
Aquisição das mudas Equipe diretiva SMMA Abril de 2018
Perfuração das covas Membros da escola Emdrago-Mutirão Maio de 2018
<div class="praticas-tabelas"> <table class="table"> <thead class="thead-verde"> <tr> <th scope="col">ATIVIDADE</th> <th scope="col">RESPONSÁVEIS</th> <th scope="col">COMO</th> <th scope="col">QUANDO</th> </tr> </thead> <tbody> <tr> <th scope="row">Observação da área</th> <td>Comunidade escolar</td> <td>Visitas in loco</td> <td>Março de 2018</td> </tr> <tr> <th scope="row">Aquisição das mudas</th> <td>Equipe diretiva</td> <td>SMMA</td> <td>Abril de 2018</td> </tr> <tr> <th scope="row">Perfuração das covas</th> <td>Membros da escola</td> <td>Emdrago-Mutirão</td> <td>Maio de 2018</td> </tr> </tbody> </table> </div>

Tarja

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse egestas tristique ante fringilla viverra. Maecenas sit amet vulputate purus. Quisque ut nulla pharetra, tempus turpis ut, pretium nulla. Nam ullamcorper sem nec eleifend convallis. Donec non commodo purus, a luctus quam. Mauris a arcu at risus suscipit blandit.
<div class="praticas-tarja"> <div class="col-md-12"> <div class="panel-custom"> <div class="panel-body-custom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse egestas tristique ante fringilla viverra. Maecenas sit amet vulputate purus. Quisque ut nulla pharetra, tempus turpis ut, pretium nulla. Nam ullamcorper sem nec eleifend convallis. Donec non commodo purus, a luctus quam. Mauris a arcu at risus suscipit blandit.</div> </div> </div> </div>

Slider


Cards

Título

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula libero, faucibus eu nisi non, mollis consequat libero. Sed congue enim sed erat iaculis, quis aliquet nisi tincidunt.

Avatar

Título

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula libero, faucibus eu nisi non, mollis consequat libero. Sed congue enim sed erat iaculis, quis aliquet nisi tincidunt.

Título

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula libero, faucibus eu nisi non, mollis consequat libero. Sed congue enim sed erat iaculis, quis aliquet nisi tincidunt.


Cards sem imagem

Título

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula libero, faucibus eu nisi non, mollis consequat libero. Sed congue enim sed erat iaculis, quis aliquet nisi tincidunt.

Título

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula libero, faucibus eu nisi non, mollis consequat libero. Sed congue enim sed erat iaculis, quis aliquet nisi tincidunt.

Título

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ligula libero, faucibus eu nisi non, mollis consequat libero. Sed congue enim sed erat iaculis, quis aliquet nisi tincidunt.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor, felis a vulputate aliquet, nulla leo varius leo, eleifend hendrerit libero arcu et elit. Mauris scelerisque, est sed feugiat hendrerit, risus erat semper massa, nec dictum ligula sapien vitae sem. Quisque sed risus non enim mollis venenatis sit amet id turpis. Pellentesque eu massa posuere felis placerat faucibus. Aliquam elit mi, vulputate a mi at, sollicitudin feugiat neque. Curabitur vitae convallis orci, vel dictum augue. Nam ac est aliquam, volutpat enim non, porttitor libero. Integer molestie magna in dolor dignissim rhoncus. Sed et tellus varius, pretium urna faucibus, volutpat est. Maecenas non lorem vitae ipsum varius imperdiet nec vitae lectus. Nulla blandit porta ante vitae tristique. Morbi vestibulum eu ex vel malesuada. Fusce eget ultrices leo. Donec enim est, scelerisque quis eros non, finibus bibendum risus. Fusce tellus dui, pharetra sit amet bibendum vel, malesuada eu purus. Maecenas tristique enim hendrerit ipsum vestibulum, et viverra ante porta.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Competência
Componente(s): Lingua Portuguesa
O que é:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus scelerisque sapien, quis aliquam est sodales sed. Donec a risus molestie, blandit tortor at, dictum nulla. Curabitur varius, ligula vitae porttitor maximus, dolor neque pulvinar risus, et placerat justo odio quis leo. Etiam mi sem, volutpat et nulla consequat, tincidunt commodo velit. Suspendisse consectetur neque ultricies, volutpat lacus ac, blandit ipsum. In ac quam tristique, pharetra massa at, sollicitudin ligula. Phasellus elementum vel sem nec bibendum. Mauris nec est pulvinar nisi ultricies luctus et nec sem. Pellentesque a hendrerit elit. Aenean hendrerit, elit quis scelerisque cursus, turpis lectus sodales lectus, sit amet pretium eros ex eget elit. Nulla a magna placerat, congue turpis vitae, aliquam lorem. Morbi auctor vestibulum augue, at euismod justo blandit ut. Suspendisse ut convallis urna. Mauris ut justo feugiat, lacinia ligula luctus, laoreet lectus.

Suspendisse tincidunt rutrum nisl. Etiam viverra odio urna, sed scelerisque magna placerat et. Nullam nec lorem non leo tristique lobortis sed id turpis. Donec id interdum nunc, id convallis lectus. Etiam viverra nibh quis diam elementum, sit amet semper nisl interdum. Proin sit amet pellentesque ligula. Cras ut metus nec elit tincidunt dignissim. Morbi placerat nec erat sed facilisis. Integer sollicitudin orci ac lacus placerat imperdiet. Duis hendrerit tellus sit amet ultrices facilisis.

Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat.

Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat. Nulla in condimentum dui. Nulla id nunc fringilla, aliquam risus at, posuere felis. Pellentesque ipsum augue, elementum nec purus vel, dignissim facilisis risus. Praesent sed faucibus leo, at mollis elit. Sed facilisis velit id velit bibendum venenatis.

Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat. Nulla in condimentum dui. Nulla id nunc fringilla, aliquam risus at, posuere felis. Pellentesque ipsum augue, elementum nec purus vel, dignissim facilisis risus. Praesent sed faucibus leo, at mollis elit. Sed facilisis velit id velit bibendum venenatis.

Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat. Nulla in condimentum dui. Nulla id nunc fringilla, aliquam risus at, posuere felis. Pellentesque ipsum augue, elementum nec purus vel, dignissim facilisis risus. Praesent sed faucibus leo, at mollis elit. Sed facilisis velit id velit bibendum venenatis.

Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Competência
Componente(s): Lingua Portuguesa
O que é:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus scelerisque sapien, quis aliquam est sodales sed. Donec a risus molestie, blandit tortor at, dictum nulla. Curabitur varius, ligula vitae porttitor maximus, dolor neque pulvinar risus, et placerat justo odio quis leo. Etiam mi sem, volutpat et nulla consequat, tincidunt commodo velit. Suspendisse consectetur neque ultricies, volutpat lacus ac, blandit ipsum. In ac quam tristique, pharetra massa at, sollicitudin ligula. Phasellus elementum vel sem nec bibendum. Mauris nec est pulvinar nisi ultricies luctus et nec sem. Pellentesque a hendrerit elit. Aenean hendrerit, elit quis scelerisque cursus, turpis lectus sodales lectus, sit amet pretium eros ex eget elit. Nulla a magna placerat, congue turpis vitae, aliquam lorem. Morbi auctor vestibulum augue, at euismod justo blandit ut. Suspendisse ut convallis urna. Mauris ut justo feugiat, lacinia ligula luctus, laoreet lectus.

Suspendisse tincidunt rutrum nisl. Etiam viverra odio urna, sed scelerisque magna placerat et. Nullam nec lorem non leo tristique lobortis sed id turpis. Donec id interdum nunc, id convallis lectus. Etiam viverra nibh quis diam elementum, sit amet semper nisl interdum. Proin sit amet pellentesque ligula. Cras ut metus nec elit tincidunt dignissim. Morbi placerat nec erat sed facilisis. Integer sollicitudin orci ac lacus placerat imperdiet. Duis hendrerit tellus sit amet ultrices facilisis.

Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat.

Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat. Nulla in condimentum dui. Nulla id nunc fringilla, aliquam risus at, posuere felis. Pellentesque ipsum augue, elementum nec purus vel, dignissim facilisis risus. Praesent sed faucibus leo, at mollis elit. Sed facilisis velit id velit bibendum venenatis.

Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat. Nulla in condimentum dui. Nulla id nunc fringilla, aliquam risus at, posuere felis. Pellentesque ipsum augue, elementum nec purus vel, dignissim facilisis risus. Praesent sed faucibus leo, at mollis elit. Sed facilisis velit id velit bibendum venenatis.

Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat. Nulla in condimentum dui. Nulla id nunc fringilla, aliquam risus at, posuere felis. Pellentesque ipsum augue, elementum nec purus vel, dignissim facilisis risus. Praesent sed faucibus leo, at mollis elit. Sed facilisis velit id velit bibendum venenatis.

Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Competência
Componente(s): Lingua Portuguesa
O que é:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus scelerisque sapien, quis aliquam est sodales sed. Donec a risus molestie, blandit tortor at, dictum nulla. Curabitur varius, ligula vitae porttitor maximus, dolor neque pulvinar risus, et placerat justo odio quis leo. Etiam mi sem, volutpat et nulla consequat, tincidunt commodo velit. Suspendisse consectetur neque ultricies, volutpat lacus ac, blandit ipsum. In ac quam tristique, pharetra massa at, sollicitudin ligula. Phasellus elementum vel sem nec bibendum. Mauris nec est pulvinar nisi ultricies luctus et nec sem. Pellentesque a hendrerit elit. Aenean hendrerit, elit quis scelerisque cursus, turpis lectus sodales lectus, sit amet pretium eros ex eget elit. Nulla a magna placerat, congue turpis vitae, aliquam lorem. Morbi auctor vestibulum augue, at euismod justo blandit ut. Suspendisse ut convallis urna. Mauris ut justo feugiat, lacinia ligula luctus, laoreet lectus.

Suspendisse tincidunt rutrum nisl. Etiam viverra odio urna, sed scelerisque magna placerat et. Nullam nec lorem non leo tristique lobortis sed id turpis. Donec id interdum nunc, id convallis lectus. Etiam viverra nibh quis diam elementum, sit amet semper nisl interdum. Proin sit amet pellentesque ligula. Cras ut metus nec elit tincidunt dignissim. Morbi placerat nec erat sed facilisis. Integer sollicitudin orci ac lacus placerat imperdiet. Duis hendrerit tellus sit amet ultrices facilisis.

Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat.

Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat. Nulla in condimentum dui. Nulla id nunc fringilla, aliquam risus at, posuere felis. Pellentesque ipsum augue, elementum nec purus vel, dignissim facilisis risus. Praesent sed faucibus leo, at mollis elit. Sed facilisis velit id velit bibendum venenatis.

Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat. Nulla in condimentum dui. Nulla id nunc fringilla, aliquam risus at, posuere felis. Pellentesque ipsum augue, elementum nec purus vel, dignissim facilisis risus. Praesent sed faucibus leo, at mollis elit. Sed facilisis velit id velit bibendum venenatis.

Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat. Nulla in condimentum dui. Nulla id nunc fringilla, aliquam risus at, posuere felis. Pellentesque ipsum augue, elementum nec purus vel, dignissim facilisis risus. Praesent sed faucibus leo, at mollis elit. Sed facilisis velit id velit bibendum venenatis.

Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Competência
Componente(s): Lingua Portuguesa
O que é:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus scelerisque sapien, quis aliquam est sodales sed. Donec a risus molestie, blandit tortor at, dictum nulla. Curabitur varius, ligula vitae porttitor maximus, dolor neque pulvinar risus, et placerat justo odio quis leo. Etiam mi sem, volutpat et nulla consequat, tincidunt commodo velit. Suspendisse consectetur neque ultricies, volutpat lacus ac, blandit ipsum. In ac quam tristique, pharetra massa at, sollicitudin ligula. Phasellus elementum vel sem nec bibendum. Mauris nec est pulvinar nisi ultricies luctus et nec sem. Pellentesque a hendrerit elit. Aenean hendrerit, elit quis scelerisque cursus, turpis lectus sodales lectus, sit amet pretium eros ex eget elit. Nulla a magna placerat, congue turpis vitae, aliquam lorem. Morbi auctor vestibulum augue, at euismod justo blandit ut. Suspendisse ut convallis urna. Mauris ut justo feugiat, lacinia ligula luctus, laoreet lectus.

Suspendisse tincidunt rutrum nisl. Etiam viverra odio urna, sed scelerisque magna placerat et. Nullam nec lorem non leo tristique lobortis sed id turpis. Donec id interdum nunc, id convallis lectus. Etiam viverra nibh quis diam elementum, sit amet semper nisl interdum. Proin sit amet pellentesque ligula. Cras ut metus nec elit tincidunt dignissim. Morbi placerat nec erat sed facilisis. Integer sollicitudin orci ac lacus placerat imperdiet. Duis hendrerit tellus sit amet ultrices facilisis.

Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat.

Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat. Nulla in condimentum dui. Nulla id nunc fringilla, aliquam risus at, posuere felis. Pellentesque ipsum augue, elementum nec purus vel, dignissim facilisis risus. Praesent sed faucibus leo, at mollis elit. Sed facilisis velit id velit bibendum venenatis.

Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat. Nulla in condimentum dui. Nulla id nunc fringilla, aliquam risus at, posuere felis. Pellentesque ipsum augue, elementum nec purus vel, dignissim facilisis risus. Praesent sed faucibus leo, at mollis elit. Sed facilisis velit id velit bibendum venenatis.

Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat. Nulla in condimentum dui. Nulla id nunc fringilla, aliquam risus at, posuere felis. Pellentesque ipsum augue, elementum nec purus vel, dignissim facilisis risus. Praesent sed faucibus leo, at mollis elit. Sed facilisis velit id velit bibendum venenatis.

Duis quis eros facilisis nulla eleifend egestas. Nunc id vehicula augue, vel aliquam metus. Pellentesque faucibus vitae dolor eu pharetra. Suspendisse ultricies ultricies justo, at tristique massa. Nullam a dapibus ante. Nunc varius, ex ut facilisis iaculis, erat enim efficitur quam, vitae ultricies arcu augue vel erat.

Robótica com Sucata, Promovendo a Sustentabilidade

Competência 1 | Competência 2 | Competência 3
Área(s): Ciências, Matemática, Língua Portuguesa e Geografia.

Caso tenha uma descrição inicial escrever aqui...

Componente(s): Ciências, Matemática, Língua Portuguesa e Geografia.
Quando: A qualquer momento do ano.
Materiais: Os materiais utilizados não foram descritos de forma detalhada.
Habilidades trabalhadas: EF07CI06; EF08CI02; EF06MA24; EF06MA32; EF06MA33; EF69LP22; EF06GE04; EF06GE11.
Escola: EMEF Almirante Ary Parreiras, São Paulo (SP)
Professor(a) responsável: Debora Denise Dias Garofalo

Código fonte:
<div class="container container-praticas"> <div class="row"> <div class="col-md-12"> <div class="praticas-titulo"> <h1>Robótica com Sucata, Promovendo a Sustentabilidade</h1> </div> <div class="praticas-titulo-bottom"></div> <div class="praticas-competencias"> Competência 1 | Competência 2 | Competência 3 </div> <div class="praticas-componentes"> Área(s): Ciências, Matemática, Língua Portuguesa e Geografia. </div> <div class="praticas-content"> <p> Caso tenha uma descrição inicial escrever aqui... </p> <div class="praticas-accordion"> <button class="accordion"><span class="accordion-title">Ficha técnica</span></button> <div class="panel"> <div class="praticas-accordion-content"> <b>Componente(s):</b> Ciências, Matemática, Língua Portuguesa e Geografia. <br> <b>Quando:</b> A qualquer momento do ano. <br> <b>Materiais:</b> Os materiais utilizados não foram descritos de forma detalhada.<br> <b>Habilidades trabalhadas:</b> EF07CI06; EF08CI02; EF06MA24; EF06MA32; EF06MA33; EF69LP22; EF06GE04; EF06GE11. </div> </div> <button class="accordion"><span class="accordion-title">Créditos</span></button> <div class="panel"> <div class="praticas-accordion-content"> <b>Escola:</b> EMEF Almirante Ary Parreiras, São Paulo (SP)<br> <b>Professor(a) responsável:</b> Debora Denise Dias Garofalo </div> </div> </div> Conteúdo aqui... </div> </div> </div> </div>

Competência 1
Componente: Lingua Portuguêsa
O que é:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor, felis a vulputate aliquet, nulla leo varius leo, eleifend hendrerit libero arcu et elit...

Competência 1
Componente: Lingua Portuguêsa
O que é:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor, felis a vulputate aliquet, nulla leo varius leo, eleifend hendrerit libero arcu et elit...

Competência 1
Componente: Lingua Portuguêsa
O que é:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor, felis a vulputate aliquet, nulla leo varius leo, eleifend hendrerit libero arcu et elit...

Competência 1
Componente: Lingua Portuguêsa
O que é:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor, felis a vulputate aliquet, nulla leo varius leo, eleifend hendrerit libero arcu et elit...

Competência 1
Componente: Lingua Portuguêsa
O que é:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor, felis a vulputate aliquet, nulla leo varius leo, eleifend hendrerit libero arcu et elit...

Competência 1
Componente: Lingua Portuguêsa
O que é:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor, felis a vulputate aliquet, nulla leo varius leo, eleifend hendrerit libero arcu et elit...


Explore as Práticas

Aqui você encontra relatos de práticas que poderão
auxiliar no desenvolvimento das aprendizagens
descritas na BNCC.

Neste Caderno são apresentados relatos de práticas de educadores que foram indicados ao Prêmio Professores do Brasil. Essas práticas foram curadas e organizadas por etapa com o objetivo de evidenciar os trabalhos já realizados nas escolas e sua relação com a Base Nacional Comum Curricular.

As práticas estão organizadas a partir das dez competências gerais da Educação Básica. Uma delas foi evidenciada, mas outras também podem ser desenvolvidas, assim como competências específicas e habilidades descritas na BNCC, também indicadas por prática. Professores de todo o Brasil poderão explorar os relatos do Caderno Digital de Práticas e se inspirar para a implementação da Base.

Assista ao vídeo e saiba um pouco mais sobre as 10 competências da Educação Básica.


Histórico da BNCC

Conheça a linha do tempo com os marcos da elaboração da Base Nacional Comum Curricular e acesse documentos que fizeram parte dessa história.

  • 2022

    A BNCC Computação foi oficialmente introduzida por meio do Parecer CNE/CEB nº 2/2022 em 17 de fevereiro de 2022. Esse parecer estabeleceu as normas sobre Computação na Educação Básica como um complemento à BNCC. Posteriormente, a Resolução CNE/CEB nº 1/2022, de 4 de outubro de 2022, reforçou essas normas, definindo os conteúdos e habilidades relacionados à Educação Digital que devem ser abordados nas escolas. Acesse aqui.

  • 2018

    Em 14 de dezembro de 2018, o ministro da Educação, Rossieli Soares, homologou o documento da Base Nacional Comum Curricular para a etapa do Ensino Médio. Agora o Brasil tem uma Base com as aprendizagens previstas para toda a Educação Básica.

    Em 02 de agosto de 2018, escolas de todo o Brasil se mobilizaram para discutir e contribuir com a Base Nacional Comum Curricular da etapa do Ensino Médio. Professores, gestores e técnicos da educação criaram comitês de debate e preencheram um formulário online, sugerindo melhorias para o documento.

    5 de Abril

    5 de abril institui-se o Programa de Apoio à Implementação da Base Nacional Comum Curricular ProBNCC.

    Acesse a PORTARIA:
    Acesse aqui.

    Em 02 de abril de 2018 o Ministério da Educação entregou ao Conselho Nacional de Educação (CNE) a 3ª versão da Base Nacional Comum Curricular (BNCC) do Ensino Médio. A partir daí o CNE iniciou um processo de audiências públicas para debatê-la.

    Acesse a versão da BNCC do Ensino Médio:
    Acesse aqui.

    Em 06 de março de 2018, educadores do Brasil inteiro se debruçaram sobre a Base Nacional Comum Curricular, com foco na parte homologada do documento, correspondente às etapas da Educação Infantil e Ensino Fundamental, com o objetivo de compreender sua implementação e impactos na educação básica brasileira.

    Acesse os materiais de apoio sobre o Dia D da BNCC da Educação Infantil e Ensino Fundamental:
    Acesse aqui.

  • 2017

    22 de Dezembro

    Em 22 de dezembro de 2017 o CNE apresenta a RESOLUÇÃO CNE/CP Nº 2, DE 22 DE DEZEMBRO DE 2017 que institui e orienta a implantação da Base Nacional Comum Curricular.

    Acesse a Resolução:
    Acesse aqui.

    Em 20 de dezembro de 2017 a Base Nacional Comum Curricular (BNCC) foi homologada pelo ministro da Educação, Mendonça Filho.

    Acesse a PORTARIA:
    Acesse aqui.

    Em abril de 2017, o MEC entregou a versão final da Base Nacional Comum Curricular (BNCC) ao Conselho Nacional de Educação (CNE). O CNE irá elaborar parecer e projeto de resolução sobre a BNCC, que serão encaminhados ao MEC. A partir da homologação da BNCC começa o processo de formação e capacitação dos professores e o apoio aos sistemas de Educação estaduais e municipais para a elaboração e adequação dos currículos escolares.

  • 2016

    Agosto

    Em agosto, começa a ser redigida a terceira versão, em um processo colaborativo com base na versão 2.

    Link para os pareceres e estudo comparativo:
    Acesse aqui.

    De 23 DE JUNHO A 10 DE AGOSTO/2016 aconteceram 27 Seminários Estaduais com professores, gestores e especialistas para debater a segunda versão da BNCC. O Conselho Nacional de Secretários de Educação (Consed) e a União Nacional dos Dirigentes Municipais de Educação (Undime) promoveram esses seminários.

    Link para os dados dos seminários estaduais:

    Dados dos seminários disponível em:
    Acesse aqui.

    Relatórios disponíveis em:
    Acesse aqui.

    Em 3 de maio de 2016 a 2ª versão da BNCC é disponibilizada.

    Link para o PDF da 2ª versão da BNCC:
    Acesse aqui.

  • 2015

    Dezembro

    De 2 a 15 de dezembro de 2015 houve uma mobilização das escolas de todo o Brasil para a discussão do documento preliminar da BNC.

    Link para a página do Dia D da BNCC:
    Acesse aqui.

    Em 16 de setembro de 2015 a 1ª versão da BNCC é disponibilizada.

    Link para o PDF da 1ª versão da BNCC:
    Acesse aqui.

    Link para os relatórios e pareceres:
    Acesse aqui.

    Entre 17 a 19 de junho acontece I Seminário Interinstitucional para elaboração da BNC. Este Seminário foi um marco importante no processo de elaboração da BNC, pois reuniu todos os assessores e especialistas envolvidos na elaboração da Base. A Portaria n. 592, de 17 de junho de 2015, Institui Comissão de Especialistas para a Elaboração de Proposta da Base Nacional Comum Curricular.

    Link para Portaria de Nomeação:
    Acesse aqui.

  • 2014

    Entre 19 e 23 de novembro é realizada a 2ª Conferência Nacional pela Educação (Conae), organizada pelo Fórum Nacional de Educação (FNE) que resultou em um documento sobre as propostas e reflexões para a Educação brasileira e é um importante referencial para o processo de mobilização para a Base Nacional Comum Curricular.

    Link para o Documento:
    Acesse aqui.

    25 de Junho

    A Lei n. 13.005, de 25 de junho de 2014, regulamenta o Plano Nacional de Educação (PNE), com vigência de 10 (dez) anos. O Plano tem 20 metas para a melhoria da qualidade da Educação Básica e 4 (quatro) delas falam sobre a Base Nacional Comum Curricular (BNC).

    Conheça a Base Legal do PNE:
    Acesse aqui.

    Conheça as 20 Metas do PNE:
    Acesse aqui.

  • 2013

    A Portaria n. 1.140, de 22 de novembro de 2013, institui o Pacto Nacional de Fortalecimento do Ensino Médio (PNFEM).

    Link para a Portaria:
    Acesse aqui.

    Veja mais documentos sobre o Pacto:
    Acesse aqui.

  • 2012

    A Portaria n. 867, de 04 de julho de 2012, institui o Pacto Nacional pela Alfabetização na Idade Certa (PNAIC) e as ações do Pacto e define suas Diretrizes Gerais.

    Link para a Portaria:
    Acesse aqui.

    Veja mais documentos sobre o Pacto:
    Acesse aqui.

    30 de Janeiro

    A Resolução n. 2, de 30 de janeiro de 2012, define as Diretrizes Curriculares Nacionais para o Ensino Médio.

    Link para a Resolução:
    Acesse aqui.

  • 2011

    14 de Dezembro

    A Resolução n.7, de 14 de dezembro de 2010, fixa a Diretrizes Curriculares Nacionais para o Ensino Fundamental de 9 (nove) anos.

    Link para a Resolução:
    Acesse aqui.

  • 2010

    17 de Dezembro

    A Resolução nº 5, de 17 de dezembro de 2009, fixa as Diretrizes Curriculares Nacionais para a Educação Infantil. Em 2010 é lançado o documento.

    Link para o DCN para a Educação Infantil:
    Acesse aqui.

    13 de Julho

    A Resolução n. 4, de 13 de julho de 2010, define as Diretrizes Curriculares Nacionais Gerais para a Educação Básica (DCNs) com o objetivo de orientar o planejamento curricular das escolas e dos sistemas de ensino.

    Link para a Resolução nº 4:
    Acesse aqui.

    Entre 28 de março e 01 de abril é realizada a Conferência Nacional de Educação (CONAE), com a presença de especialistas para debater a Educação Básica. O documento fala da necessidade da Base Nacional Comum Curricular, como parte de um Plano Nacional de Educação.

    Link para o Documento Final da CONAE:
    Acesse aqui.

  • 2008

    É instituído em 2008 e funciona até 2010 o Programa Currículo em Movimento que busca melhorar a qualidade da educação básica por meio do desenvolvimento do currículo da educação infantil, do ensino fundamental e ensino médio.

    Conheça os Pareceres do Conselho Nacional de Educação (CNE) sobre o Programa Currículo em Movimento:
    Acesse aqui.

  • 2000

    São lançados os Parâmetros Curriculares Nacionais para o Ensino Médio (PCNEM), em quatro partes, com o objetivo de cumprir o duplo papel de difundir os princípios da reforma curricular e orientar o professor, na busca de novas abordagens e metodologias.

    Link para o PCNs do Ensino Médio:
    Acesse aqui.

  • 1998

    São consolidados, em dez (10) volumes, os Parâmetros Curriculares Nacionais (PCNs) para o Ensino Fundamental, do 6º ao 9º ano. A intenção é ampliar e aprofundar um debate educacional que envolva escolas, pais, governos e sociedade.

    Link para o PDF do Volume 01 - Introdução aos PCNs do Ensino Fundamental (6º ao 9º ano):
    Acesse aqui.

  • 1997

    São consolidados, em dez (10) volumes, os Parâmetros Curriculares Nacionais (PCNs) para o Ensino Fundamental, do 1º ao 5º ano, apontados como referenciais de qualidade para a educação brasileira. Foram feitos para auxiliar as equipes escolares na execução de seus trabalhos, sobretudo no desenvolvimento do currículo.

    Link para o PDF do Volume 01 - Introdução aos PCN:
    Acesse aqui.

  • 1996

    20 de Dezembro

    É aprovada a Lei de Diretrizes e Bases da Educação Nacional (LDBEN), Lei 9.394, de 20 de dezembro de 1996, que em seu Artigo 26, regulamenta uma base nacional comum para a Educação Básica.

    Link para o texto completo da LDBEN:
    Acesse aqui.

  • 1988

    É promulgada a Constituição da República Federativa do Brasil que prevê, em seu Artigo 210, a Base Nacional Comum Curricular. Art. 210. Serão fixados conteúdos mínimos para o ensino fundamental, de maneira a assegurar formação básica comum e respeito aos valores culturais e artísticos, nacionais e regionais. § 1º O ensino religioso, de matrícula facultativa, constituirá disciplina dos horários normais das escolas públicas de ensino fundamental. § 2º O ensino fundamental regular será ministrado em língua portuguesa, assegurada às comunidades indígenas também a utilização de suas línguas maternas e processos próprios de aprendizagem.

    Link para o texto completo da Constituição Federal de 1988:
    Acesse aqui.


Base Nacional
Comum Curricular

A Base Nacional Comum Curricular (BNCC) é um documento de caráter normativo que define o conjunto orgânico e progressivo de aprendizagens essenciais que todos os alunos devem desenvolver ao longo das etapas e modalidades da Educação Básica.

Educação é a base

Conforme definido na Lei de Diretrizes e Bases da Educação Nacional (LDB, Lei nº 9.394/1996), a Base deve nortear os currículos dos sistemas e redes de ensino das Unidades Federativas, como também as propostas pedagógicas de todas as escolas públicas e privadas de Educação Infantil, Ensino Fundamental e Ensino Médio, em todo o Brasil.

A Base estabelece conhecimentos, competências e habilidades que se espera que todos os estudantes desenvolvam ao longo da escolaridade básica. Orientada pelos princípios éticos, políticos e estéticos traçados pelas Diretrizes Curriculares Nacionais da Educação Básica, a Base soma-se aos propósitos que direcionam a educação brasileira para a formação humana integral e para a construção de uma sociedade justa, democrática e inclusiva.



Busque no Caderno de Práticas