Você já viu uma árvore muito alta e larga que não dava nem para envolver seus braços em volta ou mesmo ver o topo? Essas árvores têm dez, vinte, trinta ou até cem anos e criaram um ecossistema ao seu redor que conta uma história. Assim como as árvores, alguns sites têm crescido em conteúdo e tamanho há muito tempo. Você pode pensar que eu poderia correlacionar o tempo de vida de uma árvore e de um site, mas há um recurso natural das árvores que as pessoas desenvolvedoras importaram para a criação de sites. Esse é o tópico deste artigo.

Vamos falar sobre ramos

Imagem de um galho de árvore. Foto de Ravi Roshan no Unsplash

Os galhos das árvores lembram braços humanos. Pode parecer que eles estão tentando agarrar algo ou tocar em outra árvore, mas, na verdade, esses galhos têm finalidades muito mais sofisticadas. As árvores usam os galhos principalmente para hospedar folhas que irão reunir toda a energia do ecossistema da árvore por meio da fotossíntese.

But how can we explain the way branches are formed? Their physical aspect appears to be random, —you can't really guess it— but biologists tells us that branches grow in an optimal way related to gravity or the wind or the sunlight. But where do the developers enter into this picture? Moreover, what do websites have to do with it?

Mas como podemos explicar a forma como os ramos são formados? Seu aspecto físico parece ser aleatório,—você não pode realmente adivinhá-lo— mas os biólogos nos dizem que os ramos crescem de maneira ótima em relação à gravidade, ao vento ou à luz do sol. Mas onde as pessoas desenvolvedoras entram nessa jogada? Além disso, o que os sites têm a ver com isso?

Nos estágios iniciais da World Wide Web, ou WWW, precisávamos criar uma maneira para os computadores se comunicarem. Portanto, no início dos anos 90, o HTTP foi criado. É um protocolo formal que explica como devemos enviar informações pela Internet. Isso explica como podemos nos comunicar, mas como podemos estruturar as informações em sites de uma forma visual? Foi quando o HTML foi criado.

HTML, mais um acrônimo para você

HTML significa HyperText Markup Language. No entanto, você realmente não precisa entender o que isso significa, pelo menos por enquanto. HTML é um tipo de arquivo que descreve o que há em um site e como ele está estruturado. Acho mais fácil entender olhando para um exemplo:

Printscreen da página inicial do Serenpit

Exemplo de HTML

O exemplo de HTML acima é renderizado na captura de tela em cima dele. HTML é basicamente um grupo de tags abertas(<>) e fechadas(</>) que têm sua própria interpretação em um site. Por exemplo, a tag h1 representa um texto de cabeçalho de tamanho 1. Assim como em h1, o "h" em h2 também significa cabeçalho, mas o" 2 "significa que o texto será menor. E para surpresa de ninguém, o <button> representa um botão!

Cada navegador decide como renderizará cada tag, mesmo que seja o mesmo HTML escrito. É por isso que um site às vezes parece diferente no Safari e no Chrome. Estilizar e organizar as informações em sites será assunto para outro artigo. O que vamos mergulhar agora é como os ramos das árvores se relacionam com este tópico.

Árvore: uma estrutura de dados

As pessoas desenvolvedoras importaram o conceito de ramificações para uma estrutura de dados. Basicamente, criamos um conceito visual que pode ser representado em código, mas que cria novas relações entre as informações e que pode ser representado visualmente na forma de uma árvore.

Representação de uma árvore binária

Os pontos e linhas acima representam uma estrutura de dados em árvore. O 1 é a raiz da árvore, cada linha conectando dois círculos é um ramo e os valores circulados são chamados de nó. No entanto, existem muito mais conceitos criados sobre a representação em árvore:

• Raiz: 1 é a raiz da árvore.
• Ancestralidade: 1 é pai(ou mãe) de 2 e 3, que por sua vez são filhos de 1.
• Vizinhos: ancestral ou filho de um nó.
• Folha: um nó que não possui filhos.
• Distância: o número de arestas entre a distânci mais mais curta entre dois nós. Por exemplo, a distância entre "1" e "11" é 3. Você conta o número de setas entre eles: 1 -> 2 -> 5 -> 11.

Existem muito mais conceitos, no entanto, eles não são importantes para este artigo. Também é relevante notar que existem tipos de árvores. Por exemplo, a árvore acima é uma Árvore Binária: uma árvore em que cada nó tem no máximo 2 filhos.

HTML como uma estrutura de árvore de dados

Existem muitos casos de uso para uma estrutura de dados em árvore em HTML, mas vamos nos concentrar em traversing. Traversing é uma técnica em que você percorre alguns nós de uma árvore, seguindo algumas etapas.

Abstração de uma árvore HTML

Por exemplo, imagine que você está na raiz da árvore acima, ou seja, está no nó superior, o primeiro <div>. Neste exemplo, nosso objetivo é encontrar a tag <a>. Uma restrição para encontrar uma tag em uma árvore é que você não sabe de antemão onde todas as tags estão. É quase como brincar de esconde-esconde, você tem que adivinhar onde está o objetivo e tentar encontrá-lo.

Abstração de uma árvore HTML com uma névoa bloqueando sua visão

Quando você está caminhando por um nó, você tem acesso a informação de quantos filhos ele tem e seu conteúdo. Mas o problema está em encontrar as informações de seus netos e bisnetos. É como se houvesse uma névoa bloqueando a visão além de seus filhos. Onde poderia estar a tag: logo após os filhos mais à esquerda? ou os do meio? devemos examinar todos os nós?

Uma maneira de resolver isso é fazer o traversing da árvore. Aqui estão algumas opções para fazer isso:

• Busca em profundidade: você começa a procurar por um nó filho, se a informação que você procura está nesse nó você para a busca, senão continua a trilhar o caminho dos filhos do filho até encontrar o objetivo que procura. Se você não encontrar, você começa a voltar para os irmãos e irmãs dos nós que você já visitou.
• Busca em largura: você começa a procurar em cada um dos filhos por vez, ou seja, você vai nível por nível da árvore até encontrar seu objetivo.

Mas, peraí. Ainda não entendi porquê isso é importante.

Com as conexões entre os nós, os elementos HTML, além de possuírem tag e valor próprios, passaram a ter um relacionamento entre eles.

Esse relacionamento ajuda as pessoas desenvolvedoras a fazer muitas coisas a longo prazo. Por exemplo, agora podemos diferenciar qual button foi clicado observando quem é seu pai. Ou poderíamos definir cada filho de um texto com a cor rosa. Ou podemos até estilizar o texto dos filhos de um HTML para ficar todo em maiúsculas. O céu é o limite.

Essa organização dará muito poder ao Javascript, uma linguagem de script da web, que cuida das interações, animações e outras coisas que acontecem quando você navega na web.

As pessoas desenvolvedoras ainda estão usando essa técnica de travessia?

Hoje em dia, existem muitos frameworks que facilitam a vida das pessoas desenvolvedoras. Não precisamos necessariamente entender como tudo funciona, mas não podemos negligenciar a importância disso. Se você quiser criar algo novo ou mergulhar fundo em como as coisas são construídas, com certeza você tropeçará em parte da estrutura de dados HTML.

Esses frameworks ajudam a atualizar informações na tela, animações, interagir com bancos de dados e muitas outras coisas. Eles são escritos principalmente em Javascript, aquela linguagem de script, e com código-fonte aberto.

Se esta é sua primeira vez aqui, sinta-se à vontade para ler outros tópicos e usar nossa [roleta da serendipidade] (#). Ela te levará através dos ramos de nosso blog a um reino de possibilidades.