HTML5 Data Attribute | Utilizando Atributos Customizados | Série HTML5 | SW9
Olá Pessoal. Sejam Bem Vindos ao canal e blog SW9 (http://blog.sw9.com.br) ?
Chegou o momento de retornar para a Série HTML5 e trazer novos conteúdos para a minha audiência. ?
#Quer acompanhar a Série sobre HTML5?
Se você gosta de aprender coisas novas, sempre antenado em tecnologia e tem interesse em conhecer um pouco mais sobre HTML5, não deixe de acompanhar a playlist que mantenho no meu canal do Youtube https://www.youtube.com/playlist?list=PLtluGZbI5ESj8XWTJcJmrVW6Q_tCi7uR8
Dentro desta playlist você vai encontrar episódios sobre Drag&Drop, File API, Client Side Storage e muito mais.
#O que vimos no episódio anterior?
O tema do episódio anterior foi: Criando Links de Download com o novo atributo [Download]. O atributo [download] surgiu com o HTML5, e podemos usá-lo para forçar o download de arquivos. Você perdeu este conteúdo ?? Não se preocupe, segue o link para acessá-lo http://blog.sw9.com.br/2019/11/05/html5-download-attribute-como-usar-o-atributo-download-serie-html5-sw9
#O que você vai aprender hoje?
Vamos falar sobre outro atributo que surgiu com o HTML5. Você vai aprender para que serve e como utilizar o atributo de dados customizados (data attribute).
#Introdução
Eu já me deparei com algumas situações de projeto, onde era necessário capturar vários dados, que seriam usados para controlar comportamentos na página.
Posso citar como exemplo a construção de um menu. O objetivo era construir um menu de categorias de anúncios, que ao clicar em cada categoria poderia ou não abrir um sub-menu com uma lista de sub-categorias associadas. Além desse comportamento, seria necessário definir cores diferentes para cada categoria. Antes do surgimento do atributo de dados customizados, era necessário usar atributos como o [id] e [class] para manter dados muitas vezes concatenados para controlar o comportamento do menu.
Poderíamos incluir o índice do menu, código da categoria e id da cor, de forma concatenada no atributo [id] ou [class]. Desta forma teríamos que ficar fazendo o parse dos dados para controlar o comportamento do menu.
Com o surgimento do [data atribute] do HTML5, implementar o exemplo que vimos acima fica bem mais fácil e politicamente correto.
#Porque usar os atributos customizados?
O novo atributo do tipo [data] veio justamente para facilitar implementações como a do exemplo que compartilhei acima. Além de permitir a separação dos dados em [n] atributos, podemos controlar estes atributos via Javascript e CSS de uma forma simples e rápida, sem precisar ficar fazendo parse de uma infinidade de dados concatenados. Além disso, podemos aplicar filtros e também reduzir a quantidade de requisições ao BackEnd, já que os dados necessários já serão carregados e mantidos nestes atributos.
Vale lembrar que os dados associados a estes atributos, por padrão não são exibidos aos usuários. Eles servem para facilitar o controle dos recursos existentes em uma página Web.
Antes de apresentarmos o projeto de hoje, vamos primeiro falar um pouco sobre a compatibilidade deste recurso em relação aos navegadores.
#Compatibilidade
Um ponto que sempre precisamos ter em mente antes de usar qualquer recurso, é investigar a sua compatibilidade em relação aos inúmeros navegadores.
No passado, o índice de compatibilidade do [data attribute] era baixa, porém com o tempo este índice foi aumentado e hoje já contamos com 98,28% de compatibilidade.
Mais uma vez esses dados de compatibilidade foram retirados do site Can I Use, um ótimo serviço para ser usado nas análises de compatibilidade (funcionalidades Vs Navegadores).
Para consultar a tabela de compatibilidade completa, vou deixar aqui o link: https://caniuse.com/#search=data-*
Resumo da ópera: pode usar sem medo este excelente recurso do HTML5.
#Nosso Case
No laboratório de hoje vamos apresentar um case para usarmos o atributo de dados customizados e as diversas formas de trabalhar com ele.
Vamos exibir um conjunto de cards para divulgar posts voltados para desenvolvimento web.
Cada card vai conter o título, resumo e um botão. Além disso, vamos usar os atributos de dados customizados para exibir os likes, a categoria do post e definir cores diferentes para os cards de acordo com a categoria.
Ah, e eu já estava me esquecendo. Será exibido o número do post no cabeçalho de cada card. Legal né.
Após a apresentação do case, o próximo passo será criar os cards e incluir os atributos de dados customizados.
#Nosso Case | Usando os atributos de dados
Você deve estar se perguntando: Paulo, você comentou várias coisas até agora, mas enfim como usar o [data atribute]? É justamente agora que vou te mostrar como podemos utilizá-lo.
Cada atributo de dados deve obrigatoriamente ter o prefixo data seguido de um hífen e por fim o nome do atributo desejado: data-*, onde o * deve ser substituído pelo nome do atributo.
Transportando essa regra para o nosso projeto de cards, devemos criar 3 atributos de dados: numero do post, categoria do post e quantidade de likes.
Cada atributo ficaria assim:
1- data-post-number
2- data-post-category
3- data-like
É importante ter em mente que qualquer valor associado a estes atributos adotam o tipo string como padrão. Caso precise trabalhar com tipos diferentes, será necessário aplicar conversões.
#Nosso Case | Acessando os atributos via CSS
O nosso primeiro desafio será usar CSS para acessar os atributos, com o objetivo de aplicar cores aos cards de acordo com a categoria de cada post, e na sequência, incluir o número do post no cabeçalho de cada card.
Com CSS, você consegue acessar os atributos customizados de duas maneiras:
1- Usando seletores: div[data-post-category=”JS”];
Esta primeira opção será usada para aplicar cores aos cards, de acordo com a categoria de cada post.
2- Uso da função attr: attr(data-post-number);
A segunda opção será utilizada para incluir o número do post no cabeçalho de cada card.
#Nosso Case | Acessando os atributos via JS
O próximo desafio é aprender as alternativas possíveis para acessar os atributos customizados via Javascript. Retornando para o nosso projeto, vamos usar Javascript e eleger apenas dois cards para fazermos as seguintes transformações:
1- No primeiro card vamos incluir a quantidade de likes do post;
2- No segundo card será exibida a categoria do POST.
A princípio, assim como no CSS, existem duas formas para acessar os atributos customizados:
1- Utilizar o método getAttribute: getAttribute(“data-like”);
Da mesma forma que você pode usar o getAttribute para recuperar o valor de atributo customizado, usamos o setAttribute para definir um novo valor ao atributo. ?
2- Usar o recurso dataset: apesar de ser menos compatível do que o getAttribute, o dataset agrupa os atributos customizados como itens de array.
A sintaxe do dataset deve ser dataset[‘postCategory’] ou dataset.postCategory. Não sei se você percebeu, mas existe uma diferença em como o nome do atributo customizado é referenciado.
Quando usamos o getAttribute, devemos manter o nome original do atributo, portanto o atributo post-category vai ficar post-category. Agora se a preferência é usar o dataset, o nome do atributo sofrerá uma transformação post-category = postCategory, ou seja, no dataset o nome do atributo deve ser escrito com as inicias maiúsculas a partir do segundo termo.
Exemplos: data-post = post, data-post-like = postLike, data-post-index-category = postIndexCategory.
Bom, agora que você sabe o poder e a importância de usar atributos customizados, é hora de assistir ao vídeo e ver na prática como tudo acontece. ❤️
#Hora de assistir ao vídeo
Chegou o momento de arregaçar as mangas e colocar a mão na massa. ?? ??♂️ ?♀️
[Conclusão]
No episódio de hoje [HTML5 Data Attribute | Utilizando Atributos Customizados | Série HTML5 | SW9], você aprendeu para que serve e como utilizar o atributo de dados customizados do HTML5 data-*=[Meus Dados] ?
Está disponível na área de downloads o projeto que construímos hoje. Para acessá-lo basta clicar no link a seguir http://blog.sw9.com.br/acesso-area-de-downloads/, informar um e-mail válido e automaticamente receberá as instruções para acesso.
Dentro da minha área de Downloads, procure pela pasta /HTML5/NOVOS ATRIBUTOS. O resto é com vocês 
Bom, por hoje é só. Aproveitem o vídeo e bons estudos. Fiquem antenados, que em breve teremos mais novidades.
Espero que gostem deste vídeo. Aproveito para pedir a participação de vocês no canal e blog, curtindo, compartilhando, dando sua opinião e se inscrevendo no canal e blog para receber as novidades em primeira mão.
Fiquem com Deus e até o próximo vídeo.
[Links úteis]
Curso Relacionado: [Aprenda HTML 5 e CSS 3 e Comece a Criar Seus Próprios Sites] – https://goo.gl/QsLPph
Link do vídeo: https://youtu.be/Dz-QkLCHjps
PlayList Mega Série HTML5: https://www.youtube.com/watch?v=D-XN-miEwP0&list=PLtluGZbI5ESj8XWTJcJmrVW6Q_tCi7uR8
Área de Downloads: http://blog.sw9.com.br/acesso-area-de-downloads/
Meu Blog: http://blog.sw9.com.br
Meu GitHub: https://sw9brl.github.io/MyGitHubPage
Canal youtube: https://youtube.com/+sw9brl
✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se
Que tal me pagar um café :-)
Uma pequena quantidade de café foi consumida durante a produção de um post + vídeo. Se puder, contribua adicionando mais combustível para que eu tenha condições de seguir em frente.
Brincadeiras à parte, o valor selecionado é multiplicado por 2 (x2) que representa a multiplicação de minha dedicação a cada contribuição que recebo.
Deixe um comentário