Blog SW9

Desenvolvimento Web e Híbrido na prática.
Tome um café, concentre-se, codifique. (งツ)ว

HTML5 Data Attribute | Utilizando Atributos Customizados | Série HTML5 | SW9

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. 🏃🏿 🏃🏻‍♂️ 🏃‍♀️

Aprenda HTML 5 e CSS 3

Comece a criar Sites Com o Melhor do HTML 5 e CSS 3
Curso Relacionado

[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

Post: http://blog.sw9.com.br/2019/11/14/html5-data-attribute-utilizando-atributos-customizados-serie-html5-sw9

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

Tópicos Relacionados

Deixe um comentário

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Paulo Eduardo
Geek desde criança, sempre me interessei por games, filmes e tecnologia. Sou graduado em engenharia da computação pela PUC Campinas. Possuo mais de 15 anos de experiência em desenvolvimento, com foco maior em desenvolvimento web, gestão de times e mais recentemente desenvolvimento mobile utilizando HTML e Javascript.

Termos como #backend, #frontend e #fullstack fazem parte do meu dia a dia.

Não deixe de acompanhar meu blog, canal youtube e meus produtos digitais.

Divirta-se e bons estudos. :-)
Paulo Eduardo on sabyoutubePaulo Eduardo on sabinstagramPaulo Eduardo on sabgithubPaulo Eduardo on sabfacebook
✌(◕‿-)✌ Tempo Limitado - Tenha acesso a nossa área de DownloadsClique Aqui - É Grátis
How to whitelist website on AdBlocker?