Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. HTML
Code

Estendendo o HTML com tags personalizadas

by
Difficulty:BeginnerLength:MediumLanguages:

Portuguese (Português) translation by Jonathan Ramos (you can also view the original English article)

Este tutorial irá mostrar-lhe como é fácil estender a linguagem HTML com tags personalizadas. As tags personalizadas podem ser usadas para implementar vários comportamentos, elas são uma maneira muito conveniente de escrever menos código e manter seus documentos HTML mais simples.

O que é uma tag HTML personalizada?

Com HTML você pode usar a tag <b>, por exemplo, para mostrar o texto em negrito. Se você precisa de uma lista, você pode usar a tag  <ul> com sua tag filha <li> para cada item da lista. Tags são interpretadas pelos navegadores e, juntamente com o CSS, determinam como o conteúdo de uma página web é exibido e também como as partes do conteúdo se comportam.

Às vezes, apenas usar uma tag HTML não é suficiente para a funcionalidade necessária em aplicações web. Geralmente isso é resolvido usando várias tags HTML juntamente com JavaScript e CSS, mas esta solução não é tão elegante.

Uma solução mais elegante seria usar uma tag personalizada — um identificador fechado <> que é interpretado pelo navegador para processar a nossa funcionalidade pretendida. Como nas tags HTML regulares, devemos ser capazes de usar uma tag personalizada várias vezes em uma página, e também podemos ter atributos na tag e nas sub tags para ajudar a funcionalidade da tag personalizada. Então, vamos ver um exemplo!

Exemplo #1: Criando uma tag HTML personalizada para o Gravatar

Vamos criar uma tag personalizada que irá exibir o perfil do Gravatar para um certo endereço de e-mail. Vamos chamar essa tag <codingdude-gravatar>, e vamos passar o endereço de e-mail como um atributo chamado email.

Você pode nomear suas tags personalizadas como quiser, mas note que, neste exemplo, o nome da tag personalizada começa com codingdude-. É recomendável usar prefixos como este em suas tags personalizadas a fim de evitar conflitos de nome com outras tags personalizadas. Além disso, obviamente é uma boa ideia não usar nomes que já são usados pelo HTML.

Para implementar e testar a nossa tag, nós precisaremos criar algumas coisas:

  • uma pasta para conter os arquivos do projeto. Vamos chamar esta pasta gravatar-custom-tag;
  • um arquivo HTML index.html dentro da pasta gravatar-custom-tag. Este arquivo irá conter o código HTML;
  • um arquivo JS codingdude-gravatar.js dentro da pasta gravatar-custom-tag. Este arquivo conterá o código JavaScript implementando a tag personalizada.

Vamos editar o arquivo index.html e deixá-lo parecido com isto:

Se carregarmos o index.html no navegador agora, o resultado não é tão impressionante, porque ainda temos que implementar o código para a nossa tag personalizada:

An example of the custom tag

Uma coisa a notar é que o navegador é muito indigente, assim você pode ter tags desconhecidas em um documento e o navegador pode ignorá-las. Para que nossa tag personalizada realmente exiba a imagem do Gravatar para meu e-mail, precisamos primeiro entender como funciona o Gravatar.

O Gravatar funciona através da conversão de um endereço de e-mail para a URL de uma imagem PNG que o usuário tenha selecionado. A conversão é feita calculando o hash MD5 do endereço de e-mail. A URL da imagem do Gravatar é parecida com esta: https://www.gravatar.com/avatar/EMAIL_MD5_HASH.png. Então, primeiro precisamos de uma função para calcular o hash MD5 de uma string. Por isso vamos usar uma biblioteca de código aberto que vamos adicionar ao arquivo index.html dessa forma:

Agora vamos passar para a implementação da tag personalizada. Precisamos implementar o código que identifica primeiro nossa tag personalizada no documento, e então precisamos implementar a funcionalidade da nossa tag. Isso tudo vai no nosso arquivo codingdude-gravatar.js e ficará assim:

Olhando para o código, podemos ver a função customTag() que localiza ocorrências de uma tag personalizada pelo nome (o parâmetro tagName) e executa a funcionalidade associada a tag personalizada (com o parâmetro fn).

A chamada document.createElement(tagName) é necessária para alguns navegadores (IE, em particular) para informar ao browser que vamos usar uma tag personalizada com o nome tagName, caso contrário a tag pode não funcionar.

O parâmetro fn é a função que implementa o que a tag personalizada deve fazer. No nosso caso, fn é codingdudeGravatar(). Essa função usa como parâmetro uma referência para o elemento da tag personalizada. Se a tag tem um atributo chamado email então ela passará esse valor para a função md5() da nossa biblioteca de código aberto. O resultado é usado para compor a URL da imagem do Gravatar, que é adicionada através de um elemento <img> dentro do elemento da nossa tag.

A última linha do script chama a função customTag() com o nome da tag personalizada e sua função de implementação associada. A função da tag pode ser reutilizada para qualquer tipo de tag personalizada; Você só terá que implementar a função que faz o que você precisa.

Agora, se carregarmos nosso arquivo index.html em um navegador, vamos ver o Gravatar para o meu e-mail:

Viewing the Gravatar with the text

Exemplo #2: tags HTML avançadas para desenhar um gráfico de pizza

Em nosso exemplo anterior, vimos a implementação de uma tag HTML muito simples. Você pode usar a mesma abordagem para implementar qualquer tag personalizada que você deseja.

Vamos ver como implementar uma tag personalizada mais avançada, que podemos usar para desenhar um gráfico de pizza. Vamos criar os arquivos necessários para essa tag personalizada:

  • Crie uma pasta e nomeie-a piechart-custom-tag. Esta será a pasta do nosso projeto.
  • Dentro da pasta piechart-custom-tag, crie um arquivo HTML com o nome index.html. Este arquivo irá conter o código HTML.
  • Também crie um arquivo JavaScript codingdude-piechart.js que irá conter a implementação da nossa tag personalizada.

Tags personalizadas são muitas vezes usadas para abstrair varias funcionalidades. No nosso caso, usaremos a tag <codingdude-piechart> como um wrapper para desenhar um gráfico de pizza. Se você não leu meu tutorial sobre como desenhar gráficos usando JavaScript e HTML5 Canvas, você pode dar uma olhada. Vamos usar o código desse tutorial e empacotar a funcionalidade em nossa tag personalizada.

Então edite o arquivo codingdude-piechart.js e adicione as seguintes funções do tutorial:

  • drawLine()
  • drawArc()
  • drawPieSlice()
  • Piechart()

Agora vamos editar o arquivo index.html e colocar a tag personalizada para desenhar o gráfico de pizza desta forma:

A intenção aqui é definir a largura e a altura do gráfico de pizza utilizando os atributos width e height. O atributo colors define as cores usadas para as fatias do gráfico de pizza.

Como mencionado anteriormente, esta tag é um pouco mais complexa, pois vamos usar sub tags nela. Queremos usar a sub tag <codingdude-data> aqui para definir os dados do gráfico. Vamos agora dar uma olhada em como implementar o código para esta tag.

Edite o arquivo codingdude-piechart.js e, após as funções retiradas do tutorial do gráfico de pizza, coloque o seguinte código:

A função customTag() é a mesma usada no exemplo #1. A implementação da tag <codingdude-piechart> está contida na função PiechartTag(). Esta função se encarrega dos seguintes aspectos:

  • criar o elemento <canvas> onde o gráfico será desenhado, e adicioná-lo dentro da tag personalizada. A largura e altura da tela são tomadas a partir de atributos da tag;
  • pegar o atributo colors e transformá-lo em uma matriz de cores usadas para as fatias do gráfico de pizza;
  • carregar o os elementos de <codingdude-data> um a um na estrutura de dados passado para o gráfico de pizza. Como os elementos possuem um conteúdo de texto, o navegador vai mostrar mostrar todo o texto. Nós não queremos isso, então podemos apenas remover os elementos depois de pegarmos os dados.
  • Por último, podemos chamar o construtor de Piechart() com as opções necessárias e em seguida, chamar a função draw() para desenhar o gráfico de pizza.

Se você carregar o index.html, você pode ver que a tag é processada como um gráfico de pizza e deve ficar assim:

The custom tag is rendered as a pie chart

E aí está, um belo gráfico de pizza. Mudando os atributos de <codingdude-data> o gráfico de pizza muda de acordo. Essa mesma técnica de tags personalizadas foi usada para o desenvolvimento de Infographic Charts & Graphics HTML Tags da CodeCanyon.

Infographic charts and graphics HTML tags library
Biblioteca de gráficos da CodeCanyon

A biblioteca contém tags personalizadas não só para gráficos de pizza, mas também para outros tipos de gráficos, como gráficos de barras e de linha.

Considerações finais

Neste tutorial, nós vimos dois exemplos de como criar tags HTML personalizadas para duas funcionalidades diferentes. Usando a função customTag(), você pode facilmente desenvolver suas próprias tags personalizadas.

Se você gostou deste tutorial, temos também uma grande variedade de outros tutoriais sobre HTML5 e tecnologias relacionadas, então não hesite em dar uma olha também.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.