Versão resumida

A maneira mais popular de exibir uma coleção de dados semelhantes é pelo uso de tabelas, mas a tabela do HTML têm a desvantagem de ser difícil de tornar responsivas.

Neste artigo, eu uso o Grid Layout do CSS e suas propriedades (sem usar o JavaScript) para criar tabelas que encapsulam colunas, dependendo da largura da tela, com ainda mais mudanças para um card baseado em layout para telas pequenas.

Para os impacientes, vejam no Codepen a seguir a implementação de um exemplo.

Uma pequena história sobre as tabelas responsivas do HTML

Tabelas responsivas não são um novo tópico. Muitas soluções já foram propostas. Responsive Data Table Roundup (Resumo sobre tabelas responsivas de dados, em português), publicado pela primeira vez em 2012 por Chris Coyier, faz um bom resumo de modo muito claro (incluindo uma atualização de 2018).

Really Responsive Tables using CSS3 Flexbox (Tabelas realmentes responsivas usando CSS3 Flexbox, em português) por Vasan Subramanian, mostra uma ideia de agrupar colunas, implementada com o Flexbox.

Embora muitas ideias interessantes tenham sido propostas, bibliotecas como  o Bootstrap optam pela rolagem horizontal para telas pequenas.

Como agora temos o CSS Grid, penso que poderíamos ter uma alternativa comum para uma melhor rolagem horizontal.

Tabelas em HTML

Iniciando pelo básico, uma tabela no HTML é um formato de layout para mostrar uma coleção de itens através de uma matriz de linhas e colunas. Os itens são dispostos em linhas, com os mesmos atributos de dados nas mesmas colunas, com as linhas frequentemente ordenadas com um ou mais atributos ordenáveis. O formato oferece uma visão panorâmica para compreender e examinar rapidamente grandes quantidades de dados.

Por exemplo, aqui está uma tabela hipotética de detalhes do pedido de compra, que você pode ver em uma aplicação de compras.

Um item, neste caso, é um detalhe do pedido de compra, que possui atributos como número da peça, descrição da peça etc.

Ao usar tabelas em HTML, o layout dos dados é codificado como linhas e colunas (<tr> e <td>, respectivamente). Isso pode ser suficiente para uso por uma tela que se encaixe em toda a largura da tabela, mas, na realidade, não se aplica aos inúmeros tipos de dispositivos que existem hoje. Em termos de hacks, você pode alterar a propriedade de exibição das tabelas e usar qualquer layout que possa fazer com CSS em geral, mas não parece semanticamente correto.  

Tabelas redefinidas (ou uma coleção de itens)

Vamos iniciar redefinindo como os dados da tabela devem ser expressos em HTML.

Conforme falado anteriormente, como os dados da tabela são essencialmente uma coleção ordenada de itens, parece natural usar listas ordenadas. Além disso, como as tabelas são frequentemente usadas para gerar descrições textuais, parece natural incluir isso uma seção, mas isso pode depender do contexto de como os dados da tabela são usados.

<section>
 <ol>
  <!-- O primeiro item da lista é o cabeçalho da tabela -->
  <li>
   <div>#</div>
   <!-- Envolva atributos semanticamente semelhantes como uma hierarquia de divs -->
   <div>
    <div>Número da peça</div>
    <div>Descrição da peça</div>
   </div>
   ...
  </li>
  <!-- O resto dos itens da lista são os dados de fato -->
  <li>
   <div>1</div>
   <!-- Informações relacionadas ao grupo de peças -->
   <div>
    <div>100-10001</div>
    <div>Descrição das peças</div>
   </div>
  ...
  </li>
 ...
 </ol>
</section>

As <div> "puras" são usadas para expressar atributos de itens, uma vez que o HTML5 não define uma tag apropriada para isso. A chave aqui é expressar semanticamente atributos similares como um hierarquia de <div>. Essa estrutura será usada ao definir como os dados devem ser dispostos. Voltarei nesse ponto na próxima seção de tópicos de estilos.

Quanto aos dados reais dentro do elemento <div>, o primeiro item da lista é o cabeçalho e o restante dos itens são os dados principais.

Agora, é o momento de falar sobre estilizar os itens de estilos com o CSS Grid.

Estilizando coleções de itens

A ideia básica aqui é exibir todos os atributos de itens como uma tabela normal, se a largura de exibição permitir. Esse layout ajuda a poder ver o máximo de itens (linhas) possíveis.

Quando a largura da exibição fica mais estreita, alguns atributos são empilhados verticalmente para economizar espaço horizontal. A escolha dos atributos empilhados deve ser baseada em:

1. Os atributos fazem sentido quando estão empilhados ?
2. Quando empilhados verticalmente, o espaço horizontal é preservado?

Quando a largura diminui ainda mais para o tamanho de um dispositivo móvel, cada item é exibido como um card. Este layout tem redundância, pois os nomes dos atributos são exibidos repetidamente em cada card e tem a menor capacidade de visualização, mas isso não compromete a usabilidade (por exemplo, rolagem horizontal, texto muito pequeno etc).

Agora vamos aos detalhes.

Estilização – passo 1: a tabela inteira

Aqui está um resumo visual de como serão as alterações implementadas com o CSS Grid.

Para fazer com que as colunas sejam agrupadas, vários grid containers são definidos como uma hierarquia. As caixas vermelhas são um tipo de grid container para cada linha e as caixas azuis são para cada grupo de colunas que é agrupado.

Vamos começar ajustando a lista como um grid container, definindo uma classe chamada .item-container e inserindo <li> (caixa vermelha).

.item-container {
    display: grid;
    grid-template-columns: 2em 2em 10fr 2fr 2fr 2fr 2fr 5em 5em;
}

O número de colunas explícitas especificadas com  grid-template-columns é igual a nove, que é o número de <div> de nível superior, diretamente aninhadas em  <li>.

A largura da coluna é definida em comprimento relativo para fazer com que as colunas sejam agrupadas. A fração real deve ser ajustada com base no conteúdo.

As colunas que não foram encapsuladas são definidas em comprimento absoluto para maximizar o uso de largura para as colunas de quebra automática. No exemplo dos detalhes dos pedidos de compras (purchase order details), a segunda coluna é um ID de dois dígitos, então defino a largura para dobrar esse tamanho de 2 em.    

Em seguida, definimos outro grid container chamado .attribute-container e o aplicamos em todas as <div> intermediárias sob a lista (caixas azuis).

.attribute-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr));
    }

A largura mínima da coluna para todos os itens do grid em .attribute-container é especificada com variável do CSS chamada --column-width-min  (abordaremos isso mais tarde) usando a função minmax, com o máximo definido para ocupar o resto do espaço (exemplo: uma fração). Como grid-template-columns está definido como repeat, o espaço horizontal disponível será dividido ao número máximo de colunas que possa ocupar, pelo menos, --column-width-min. O restante das colunas vai para a próxima linha. A largura da coluna será esticada se houver excesso de espaço horizontal, pois o repeat está definido como auto-fit.

Estilização – passo 2: agrupando a tabela

Em seguida, --column-width-min precisa ser independentemente especificado para cada coluna, a fim de agrupá-las. Só para ficar claro, as variáveis precisam ser especificadas para que a tabela inteira também seja renderizada corretamente. Para fazer isso, a class é definida para cada .attribute-container. Uma --column-width-min diferente é especificada para cada escopo de class.

Vamos dar uma olhada no HTML, onde .part-id é aplicado,

<div class="attribute-container part-id">
    <div>Part Number</div>
    <div>Part Description</div>
</div>

Vejamos também o CSS:

.part-id {
    --column-width-min: 10em;
}

Esse grid container específico terá duas colunas, contanto que a largura disponível seja maior que 10 em para cada item do grid (exemplo: o grid container é mais largo do que 20 em). Uma vez que a largura do grid container se torne mais estreita do que 20 em, o segundo item grid passará para a próxima linha.

Quando combinamos as propriedades do CSS desse modo, precisaremos somente de um grid container .attribute-container, com os detalhes alterados onde a class é aplicada.

Podemos ainda aninhar .attribute-container, para obter múltiplos níveis de agrupamento com diferentes larguras, como no exercício a seguir:

<div class="attribute-container part-information">
    <div class="attribute-container part-id">
        <div class="attribute" data-name="Part Number">Número de peça</div>
        <div class="attribute" data-name="Part Description">Descrição da peça
    </div>
    </div>
    <div class="attribute-container vendor-information">
        <div class="attribute">Número do fornecedor</div>
        <div class="attribute">Nome do fornecedor</div>
    </div>
</div>
.part-information {
    --column-width-min: 10em;
}
.part-id {
    --column-width-min: 10em;
}
.vendor-information {
    --column-width-min: 8em;
}

Todos os itens acima estão incluídos na media query abaixo. O breakpoint deve ser selecionado com base na largura necessária quando sua tabela é agrupada ao extremo.

@media screen and (min-width: 737px) {
...
}

Estilização – passo 3: layout de cards

O layout de cards será semelhante a um formulário típico, com nomes de atributos  na primeira coluna e valores de atributos na segunda coluna.

Para fazer isso, uma class chamada .attribute é definida e aplicada para todas as tags <div> sob as <li>.

.attribute {
    display: grid;
    grid-template-columns: minmax(9em, 30%) 1fr;
}

Os nomes dos atributos são obtidos de um atributo personalizado das div chamadas data-name, por exemplo  <div class="atributo" data-name="Número da pela"> e um pseudoelemento é criado. O pseudoelemento estará sujeito ao layout do grid container.

.atributo::before {
    content: attr(data-name);
}

O primeiro item da lista é o cabeçalho e não precisa ser mostrado.

/* Não exiba o primeiro item, pois ele é usado para exibir o cabeçalho para layouts tabulares */
.collection-container>li:first-child {
    display: none;
}

Finalmente, os cards são expostos em uma coluna em dispositivos móveis, mas em duas para telas com um pouco mais de largura, mas não o bastante para mostrar uma tabela.

/* 2 Colunas para o Card Layout */
@media screen and (max-width: 736px) {
    .collection-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }
...
}
/* 1  Coluna para Card Layout */
@media screen and (max-width:580px) {
    .collection-container {
        display: grid;
        grid-template-columns: 1fr;
    }
}

Notas finais

Acessibilidade é uma área que não foi considerada neste artigo e pode haver espaço para melhorias nesse quesito. Obrigado pela leitura.

Escrito por: Steven Gilbert

Imagine que você pode acelerar o seu aprendizado e melhorar a memorização nos fundamentos, técnicas e comandos de programação.

Hoje, mostrarei a você como fazer isso, utilizando a repetição espaçada e uma ferramenta gratuita de código aberto chamada Anki.

Muito atestam os benefícios da repetição espaçada:

• O campeão do jogo Jeopardy!, Robert Craig, afirma que ele deve parte do seu sucesso a utilizar o Anki para memorizar curiosidades.
• O perfil Googley as Heck, que estudou em tempo integral por 8 meses para uma entrevista para o Google (texto em inglês), diz que "Repetição espaçada é a chave para a memorização... Você se tornará um expert ao revisitar e revisar ao longo do tempo. Se fizer isso, chegará em um ponto onde não esquecerá dos detalhes."
• Derek Sivers, fundador do CDBaby, escreveu (texto em inglês) que a repetição espaçada é "a técnica de programação mais útil que encontrei em 14 anos de programação de computadores."

Para mim, pessoalmente, o Anki tem sido uma parte indispensável do meu esforço para aprender a programar. Uso o Anki para lembrar de ideias importantes para programar em HTML, CSS, JavaScript e de comandos do Git e do Bash.

Atualmente, estou em processo de adiamento de matrícula (deferral) na UC-Berkeley Law School. O Anki será parte integral da minha estratégia para dominar as leis.

Neste artigo, abordarei:

• O que é repetição espaçada
• Como o Anki auxilia com a repetição espaçada
• Como isso pode acelerar o seu aprendizado e aumentar a sua retenção de conceitos de programação.

O que é a repetição espaçada?

A repetição espaçada visa resolver o problema de esquecimento (texto em inglês). Ela sustenta que o momento ideal para se lembrar de uma nova informação é no momento em que você está prestes a esquecê-la.

Por exemplo, supondo que você não saiba qual é a capital da Colômbia e que, neste exato momento, eu diga para você qual é a capital do país:

"A capital da Colômbia é Bogotá."

Vamos supor que sua memória seja do tipo que se lembrará desse novo fato – que a capital da Colômbia é Bogotá – após sua primeira exposição à informação, por um período de 20 minutos. Depois disso, você esquecerá da informação.

Mas, se em 19 minutos e 59 segundos, enquanto estamos tomando um café, eu relembrar você dessa informação...  

"A capital da Colômbia é Bogotá."

...a teoria da repetição espaçada diz que você será capaz de lembrar que Bogotá é a capital da Colômbia por agora, digamos 40 minutos. Depois disso, você esquecerá novamente.

Se eu relembrar você novamente 39 minutos e 59 segundos depois disso...

"A capital da Colômbia é Bogotá."

...você será capaz de reter essa informação geográfica na memória por um período ainda maior – digamos, até uma hora.

Se continuarmos assim – eu continuarei lembrando você de que a capital da Colômbia é Bogotá, justamente no momento em que você estiver prestes a esquecer – o tempo entre os lapsos de memória cresce exponencialmente de horas para dias, depois para meses, depois para anos.

Ao final, como diz a teoria, o conhecimento – de que Bogotá é a capital da Colômbia – ficará mais ou menos permanentemente alojado em sua memória.

Essa noção de declínio da memória ao longo do tempo é conhecida como a curva de esquecimento e foi desenvolvida por Herman Ebbinghaus, em 1885.

Essa ideia – de que é mais eficiente e eficaz espaçar o aprendizado ao longo do tempo em vez de estudar demais – é conhecida como efeito de espaçamento.

Juntos, a curva de esquecimento e o efeito de espaçamento são conceitos fundamentais por trás da repetição espaçada.

Dependendo da sua curva de esquecimento, você determina o intervalo ideal (texto em inglês) para relembrar você mesmo de um item da memória (qualquer informação). Você espaça o reforço do item de memória de acordo. Piotr Woźniak, um pioneiro em pesquisa de memória, resume essas ideias (texto em inglês):

O intervalo ideal é calculado com base em dois critérios contraditórios:

1. Os intervalos devem ser o mais longos possível para obter a frequência mínima de repetições e aproveitar melhor o chamado efeito de espaçamento, que diz que intervalos mais longos entre repetições, até certo limite, produzem memórias mais fortes.

2. Os intervalos devem ser curtos o bastante para garantir que o aprendizado ainda seja lembrado.

Nesse momento, você pode estar se perguntando: "mas como saber precisamente o momento em que estamos prestes a esquecer de que a capital da Colômbia é Bogotá? Como saber qual é o intervalo ideal?".

É claro que seria muito difícil saber com exatidão sem muitas tentativas e erros detalhados e uma atenção aos detalhes no nível de Charles Darwin. Felizmente, porém, não precisamos de tanta diligência porque um amigo bem conhecido pode nos ajudar: o software (você também pode usar um sistema não automatizado chamado de sistema Leitner – texto em inglês).

O software, construído sobre muitas pesquisas sobre a memória, pode ajudá-lo a determinar o momento ideal para reforçar a memorização. Mais especificamente, estamos falando do software de repetição espaçada.

O que é o Anki?

O Anki é uma ferramenta de software de repetição espaçada de código aberto desenvolvida e cuidada por Damien Elmes. Você pode pensar que ele é uma espécie de "programa de flashcards inteligente", que aproveita a repetição espaçada e torna a memorização mais eficiente.

O Anki foi construído com base na premissa de que você se lembra melhor do conhecimento com lembretes periódicos e estrategicamente cronometrados. O que significa que é construído sobre as vantagens da repetição espaçada.

Você pode usar o Anki para lembrar virtualmente de qualquer coisa que precise ser lembrada.

Observe, no entanto, que o Anki não substitui o aprendizado. Você deve primeiro entender o material que está aprendendo e, em seguida, recorrer ao Anki, o que o ajudará de maneira brilhante a reter o conhecimento adquirido. O Anki é uma parte do processo de aprendizagem que vem após a compreensão.

Existem outros softwares de repetição espaçada no mundo, como o SuperMemo, criado por Piotr Woźniak, mencionado acima. Na verdade, o Anki utiliza uma versão do algoritmo que foi utilizado no SuperMemo.

Eu me concentrei no Anki porque é o software que me acostumei a utilizar, e funciona bem. Além disso, ele é de código aberto e gratuito. Se você já usou o SuperMemo ou outra ferramenta de software de repetição espaçada, ficaremos felizes de saber sobre suas experiências.

Se você decidir usar o Anki também, eu o encorajo a ler sobre Woźniak (texto em inglês) e sobre o que ele tem a dizer sobre memória, aprendizado e criatividade (texto em inglês), pois é bastante pontual.

No que diz respeito aos dispositivos para uso, o Anki vem em uma versão para desktop na qual, se você nunca usou o Anki antes, é recomendável começar. Há também:

• Um aplicação para a web gratuita, AnkiWeb.
• Um aplicação para Android gratuita, AnkiDroid, totalmente compatível e sincronizável com o AnkiWeb para desktop.
• Para usuários de Iphone, a aplicação AnkiMobile encontra-se no valor de U$24,99 na App Store (no momento em que este texto foi escrito).

Como o Anki funciona

Saiba que você pode se aprofundar em como usar e configurar o Anki (documentação em inglês). Eu apenas dou a você uma visão geral para que você entenda a essência do software.

1. Você cria "baralhos", ou seja, um grupo de cartas que representam uma grande categoria. Por exemplo, "JavaScript" ou "Capitais de Lugares" podem compor o "baralho".

Este é um exemplo de um deck no app Anki na versão desktop (não se preocupe com os itens "New", "Learning" e "To Review" por agora. Comentarei sobre essas opções mais a frente):

2.  Você adiciona cards (cartões) ao seu deck (baralho), que é customizado com HTML e CSS.

Um card pode ser um flashcard com conteúdo frontal e traseiro padrão, onde você primeiro é apresentado ao lado frontal. Aqui é um exemplo de um deck de "Capitais":

Quando você já souber a resposta, selecione Show Answer (mostrar a resposta) para revelar a resposta localizada no verso do cartão:

Dica: há outros tipos de cartões, além do tipo flashcard com frente e verso, como o de exclusão cloze (texto em inglês) com a qual você se familiarizará. A exclusão cloze é um tipo de cartão particularmente útil que eu utilizo o tempo todo (na verdade, a maioria dos meus cartões utilizam a exclusão cloze) porque é útil e simples na organização das informações. Criar cards no Anki é uma arte. Quanto mais você praticar, melhor você ficará. Como regra geral, você vai querer tentar seguir o princípio de informação mínima (texto em inglês), que significa, essencialmente, manter algo muito simples. Você quer manter os seus cards o mais simples possível, porque o simples é mais fácil de lembrar.

3. Assim que terminar de adicionar os cards, você deve começar a praticar no Anki.

Vamos voltar ao card Colômbia-Bogotá para ver como o processo funciona.

Depois de selecionar Show Answer, é mostrado o verso do card. Você, então, pode se perguntar:

Foi muito difícil chegar à resposta?

• Se você não souber a resposta, você pode selecionar Again (novamente), que mostrará o card novamente em menos de um minuto.
• Se você encontrou a resposta depois de fazer uma pausa e vasculhar em sua memória, pode selecionar Good (bom), que mostrará o cartão novamente em menos de 10 minutos.
• Se a resposta foi fácil, você pode escolher Easy (fácil) e não visualizará o card novamente por quatro dias.

O programa Anki, então, acompanha o estado do seu progresso: quais cartões revisar e quando. Isso significa que o Anki está fazendo o trabalho tedioso de acompanhar sua curva de esquecimento para cada cartão.

Esse é o poder da automatizar a repetição espaçada com software.

Eu poderia apontar que você pode mudar algumas variáveis do algoritmo de repetição espaçada do Anki. Você faz isso acessando as opções do deck e personalizando o que deseja personalizar, como o número de cartões revisáveis por dia, as opções de intervalo de tempo, entre outras variáveis.

No começo, porém, talvez você queira deixar essas configurações de lado e apenas usar os padrões. À medida que você se sentir mais confortável com o Anki, poderá começar a ser criativo com as opções do deck.

Vamos revisitar nosso deck JavaScript:

• New (novo) significa que você adicionou 4 novos cartões ao seu baralho de JavaScript e eles estão prontos para serem revisados.
• Learning (em fazer de aprendizado) significa que, se você estiver trabalhando em um deck e escolher, digamos, Good (bom) < 10m, o Anki armazenará esse cartão na fila de aprendizado e o mostrará novamente em 10 minutos. Veja mais detalhes aqui.
• To Review (para revisar) representa o número de cartões pendentes para revisão.  

Tudo isso ficará muito mais claro quanto mais você usar o Anki.

Com começar com o Anki

A respeito de tutoriais e como usar o Anki, a documentação do sites é fenomenal e provavelmente responderá a maioria das suas perguntas. Também há alguns vídeos de tutoriais úteis.  

Enquanto isso, darei a você uma lista para iniciar com o Anki e o porquê a checklist pode ser útil.

1.   Leia o artigo de Derek Siver (em inglês) sobre repetição espaçada e o porquê ela reforça muito do que descrevi.

2. Leia a entrevista da Wired com Piotr Woźniak (em inglês), pois ela oferece uma visão holística da repetição espaçada, aprendizado e pesquisa de memória.

3. Leia Effective learning: Twenty rules of formulating knowledge (em inglês), de Piotr Wózniack. Ele fornece técnicas de como formular e estruturar seus cartões do Anki.

Em especial, lembre-se de que a repetição espaçada não substitui o aprendizado. Por isso, é importante você entender o material antes de iniciar o método de repetição espaçada. Primeiro, entenda. Depois, reforce com o Anki. Lembre-se de usar imagens e a metodologia de manter as coisas simples para criar os seus cards quando possível.

4. Crie seus próprios decks.

5. Lembre-se de manter seus decks com tópicos amplos e gerais. Por exemplo, se você está aprendendo JavaScript, não crie um deck chamado "Closures" e outro chamado "Herança prototipada". Em vez disso, crie um deck "JavaScript". Consulte Using Decks Appropriately, na documentação para mais detalhes.

6. Procure se acostumar com a exclusão cloze (vídeo em inglês), pois ela ajudará bastante o seu aprendizado.

7. Entenda as desvantagens.

Existem poucas desvantagens na repetição espaçada. A interferência na recordação é uma delas.

Por exemplo, você pode imaginar sofrer interferência na recordação com, digamos, as capitais de Martinica, Mauritânia e Ilhas Maurício, pois todas elas possuem nomes parecidos.

Algumas interferências são difíceis de escapar e você pode querer implementar outros hacks de memória nesses casos. Você, porém, pode limitar a desvantagem mantendo seus cartões com conteúdo simples.

Aprenda mais sobre as desvantagens aqui (vejas as desvantagens abaixo) e aqui (veja como combater as interferências abaixo) - textos em inglês.

8. Lembre-se de manter seus decks e cards sincronizados. Escolha uma "base inicial" como a versão para desktop e, em seguida, sincronize com o AnkiWeb e um dos aplicativos de celular sempre que fizer uma alteração. Criar seus cards e decks leva um certo tempo. Evite a dor de cabeça de ter que refazer esse trabalho.

9. Faça do Anki um hábito. Para ver os frutos da magia dessa ferramenta acontecerem, você deve tomar uma decisão e se comprometer a revisar seus cards todos os dias. Associe o Anki a uma xícara de café, pela manhã, ou na hora do almoço, ou com algo positivo. Encontre maneiras de tornar o Anki um hábito.

Recapitulando:

• A repetição espaçada é a ideia de que você pode se lembrar de uma informação com mais eficiência se for exposto a ela no momento do esquecimento;
• A ferramenta Anki automatiza a repetição espaçada. Isso contribui para uma ferramenta de memorização incrivelmente eficiente e útil.
• O Anki pode ajudá-lo a construir sua base de conhecimento de fundamentos, técnicas e práticas recomendadas de programação de computadores.  
• Além do conhecimento de programação de computadores, você pode usar o Anki para lembrar de qualquer outra coisa que queira adicionar à sua memória.
• Lembre-se: o Anki faz parte do processo de aprendizado, não é um substituto dele. Você deve primeiro entender, depois usar o Anki.

Se você tiver dúvidas, pode enviar uma mensagem para o Twitter do autor.

Leituras adicionais (algumas em inglês):

• Repetição espaçada, Wikipédia
• Curva do esquecimento, Wikipédia
• Efeito do espaçamento, Wikipédia
• Hermann Ebbinghaus, Wikipédia
• Sistema Leitner, Wikipedia (em inglês)
• Damien Elmes, criador do Anki
• Documentação do Anki (em inglês)
• General principles of SuperMemo (em inglês), por Piotr Woźniak
• The roots of creativity and genius (em inglês), por Piotr Woźniak
• Want to Remember Everything You’ll Ever Learn? Surrender to This Algorithm (em inglês), por Gary Wolf para Wired
• Memorizing a programming language using spaced repetition software (em inglês), por Derek Sivers
• Using spaced repetition systems to learn and retain technical knowledge (em inglês), por Jack Kinsella

O que é uma árvore AVL?

Uma árvore AVL é um tipo de árvore binária de busca. Nomeada em homenagem aos seus criadores, Adelson-Velsky e Landis, as árvores AVL possuem a propriedade de autobalanceamento dinâmico, além de todas as outras propriedades mostradas pelas árvores binárias de busca.

Uma árvore binária de busca, ou BST (do inglês, binary search tree), é uma estrutura de dados compostas de nós. Ela tem as seguintes garantias:

1. Cada árvore possui um nó raiz (no topo)
2. O nó raiz tem zero, um ou dois filhos
3. Cada nó filho tem zero, um ou dois nós filhos.
4. Cada nó tem até dois filhos
5. Para cada nó, seus descendentes da esquerda são menores que o nó atual, que é menor que o descendentes da direita

As árvores AVL têm uma garantia adicional:

1. A diferença entre as profundidade das camadas do lado direito e esquerdo não pode ser maior que um. Essa diferença é chamada de fator de balanço.
   
   Para manter essa garantia, a implementação de uma AVL incluirá um algoritmo para balanceamento da árvore quando a adição de um elemento prejudicar essa garantia.  

As árvores AVL têm uma complexidade de tempo de busca, inserção e exclusão, no pior dos casos, de O(log n), onde n é o número de nós na árvore. A complexidade de espaço de pior caso é O(n).

Processo de inserção na AVL

A inserção em uma árvore AVL é similar à inserção em uma árvore binária de busca.  Depois de inserir um elemento, no entanto, você precisa ajustar as propriedades da AVL utilizando rotações para esquerda ou para a direita:

• Se houver um desbalanceamento na subárvore da direita do filho da esquerda do nó, faça uma rotação dupla à direita.
• Se houver um desbalanceamento na subárvore da esquerda do filho da esquerda do nó, faça uma rotação simples à direita.
• Se houver um desbalanceamento na subárvore da direita do filho da direita do nó, faça uma rotação simples à esquerda.
• Se houver um desbalanceamento  na subárvore da esquerda do filho da direita do nó, faça uma rotação dupla à esquerda.  

Rotações da árvore AVL

Nas árvores AVL, após cada operação, como inserção e exclusão, o fator de balanceamento de cada nó precisa ser verificado. Se cada nó satisfizer a condição do fator de balanceamento, a operação pode ser concluída. Caso contrário, a árvore precisa ser rebalanceada utilizando as operações de rotação.

Existem quatro rotações e elas são classificadas em dois tipos:

Rotação simples à esquerda (rotação SE)

Na rotação simples à esquerda, cada nó se move uma posição para a direita da posição atual.

Rotação simples à direita (rotação SD)

Na rotação simples à direita, cada nó se move uma posição para a direita da posição atual.

Rotação dupla à direita (rotação DD)

As rotações duplas à direita são uma combinação de uma única rotação para a esquerda seguida de uma rotação para a direita.

Primeiro, cada nó se move uma posição para a esquerda. Depois, se move uma posição para a direita da posição atual.

Rotação dupla à esquerda (rotação DE)

As rotações duplas à esquerda são uma combinação de uma única rotação para a direita seguida de uma rotação para a esquerda.

Primeiro, cada nó se move uma posição para a direita. Depois, se move uma posição para a esquerda da posição atual.

Aplicação das árvores AVL

As árvores AVL são benéficas em casos de bancos de dados, onde inserções e exclusões não são frequentes, mas onde você confere as entradas com frequência.