Guia Dev
Photo
Parece besteira, mas tem muito mais para falar sobre o button ainda.
#html5 #htmlmoderno #semantica #html #button
#PraCegoLer #PraCegoVer
Uma imagem com fundo preto simulando um editor de código, mostrando textos e exemplos de como utilizar o element button (tag).
Mostra exemplos que funciona, porém que devem ser evitados quando possível de como criar buttons através de outros elementos como input do tipo submit, div com a landmark role=button e link sem href com a landmark role=button, tabindex e um atributo aria chamado aria-pressed que informa a alternância do botão quando pressionado.
E também utilizando o elemento button para mostrar que não precisa de tanta configuração e que tem a semântica e acessibilidade de maneira nativa.
Observações:
O elemento button sem o atributo type, assume o type automaticamente como submit;
Os types são importantes para definir sua ação e os disponíveis são (button, reset e submit)
button = Sem comportamento padrão (Muito usado fora dos forms)
reset = Quando usado em forms, redefine para valores iniciais
submit = Envia dados (Normalmente encontrado em forms)
E para deixar mais acessível usar "aria-label" ou "aria-labelledby" quando o <button> não tiver uma descrição (usado normalmente quando utilizamos ícones), essa abordagem atende a técnica (ARIA14) da WCAG 2.0
#html5 #htmlmoderno #semantica #html #button
#PraCegoLer #PraCegoVer
Uma imagem com fundo preto simulando um editor de código, mostrando textos e exemplos de como utilizar o element button (tag).
Mostra exemplos que funciona, porém que devem ser evitados quando possível de como criar buttons através de outros elementos como input do tipo submit, div com a landmark role=button e link sem href com a landmark role=button, tabindex e um atributo aria chamado aria-pressed que informa a alternância do botão quando pressionado.
E também utilizando o elemento button para mostrar que não precisa de tanta configuração e que tem a semântica e acessibilidade de maneira nativa.
Observações:
O elemento button sem o atributo type, assume o type automaticamente como submit;
Os types são importantes para definir sua ação e os disponíveis são (button, reset e submit)
button = Sem comportamento padrão (Muito usado fora dos forms)
reset = Quando usado em forms, redefine para valores iniciais
submit = Envia dados (Normalmente encontrado em forms)
E para deixar mais acessível usar "aria-label" ou "aria-labelledby" quando o <button> não tiver uma descrição (usado normalmente quando utilizamos ícones), essa abordagem atende a técnica (ARIA14) da WCAG 2.0
Felipe Fialho:
O inicio, o fim e o meio do Desenvolvimento Front-End
Sou desenvolvedor desde 2009, nessa época ainda não existia o termo “Front-End Developer” e essa profissão passou por diversas mudanças desde então.
https://lnkd.in/eacKDKu
O inicio, o fim e o meio do Desenvolvimento Front-End
Sou desenvolvedor desde 2009, nessa época ainda não existia o termo “Front-End Developer” e essa profissão passou por diversas mudanças desde então.
https://lnkd.in/eacKDKu
Medium
O inicio, o fim e o meio do Desenvolvimento Front-End
Sou desenvolvedor desde 2009, nessa época ainda não existia o termo “Front-End Developer” e essa profissão passou por diversas mudanças…
@GuiaDev
Inscreva-se no site, diretamente na vaga desejada. Faça parte do time. http://talentos.supero.com.br
Inscreva-se no site, diretamente na vaga desejada. Faça parte do time. http://talentos.supero.com.br
Forwarded from Marco Bruno
Hoje live coding começará entre 19:30 e 20hrs. Agora faremos a integração do #FrontEnd feito em #React com a nossa #APIREst que está feita em cima do #NodeJS com #Restify.
Viva ao #JavaScript. Quem quiser colar pra trocar um conhecimento, só entrar em:
twitch.tv/marcobrunobr
Viva ao #JavaScript. Quem quiser colar pra trocar um conhecimento, só entrar em:
twitch.tv/marcobrunobr
Twitch
Twitch is the world's leading video platform and community for gamers.
Guia Dev
Photo
Existem diversos elementos semânticos inline que podem ser usados no lugar do <span> quase sempre.
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Inline_elemente
#htmlmoderno #html5 #semantica #acessibilidade #a11y
#PraCegoLer #PraCegoVer
Uma imagem com fundo preto simulando um editor de código, mostrando textos e exemplos de que as vezes existem um elemento semântico inline para ser usado no lugar do span.
O não traz nenhum sentido ao conteúdo interno e nenhum
estilo, com isso muitos devs cometem erros usando esse
elemento de maneira inadequada.
Mostra um exemplo a ser evitado com o span em pedaços de texto usando classes para estilizar visualmente.
E mostra um exemplo utilizando o elemento strong e o elemento em, para usar semântica e acessibilidade que cada um desses elementos tem nativamente (Uma coisa leva a outra! A semântica leva a acessibilidade)
Algumas dicas extras são:
1º Sempre opte por elementos semânticos;
2º Use span quando não for necessário dar sentido ao conteúdo interno ou que não tenha outra tag para o lugar;
3º Se quiser estilizar, pode atribuir normalmente uma "class" e customizar
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Inline_elemente
#htmlmoderno #html5 #semantica #acessibilidade #a11y
#PraCegoLer #PraCegoVer
Uma imagem com fundo preto simulando um editor de código, mostrando textos e exemplos de que as vezes existem um elemento semântico inline para ser usado no lugar do span.
O não traz nenhum sentido ao conteúdo interno e nenhum
estilo, com isso muitos devs cometem erros usando esse
elemento de maneira inadequada.
Mostra um exemplo a ser evitado com o span em pedaços de texto usando classes para estilizar visualmente.
E mostra um exemplo utilizando o elemento strong e o elemento em, para usar semântica e acessibilidade que cada um desses elementos tem nativamente (Uma coisa leva a outra! A semântica leva a acessibilidade)
Algumas dicas extras são:
1º Sempre opte por elementos semânticos;
2º Use span quando não for necessário dar sentido ao conteúdo interno ou que não tenha outra tag para o lugar;
3º Se quiser estilizar, pode atribuir normalmente uma "class" e customizar
MDN Web Docs
Elementos inline
"Inline" é uma categorização dos elementos do HTML, em contraste com os "elementos de bloco". Os elementos inline podem ser exibidos em nível de bloco ou outros elementos inline. Eles ocupam somente a largura de seu conteúdo. A diferença entre elementos inline…
Acabou de começar uma série de vídeos que pode te ensinar a criar seu primeiro tema de WordPress com Bootstrap 4.
Para assistir: https://www.youtube.com/watch?v=u65n-osqti8
A série toda vai ser grátis e no YouTube
Para assistir: https://www.youtube.com/watch?v=u65n-osqti8
A série toda vai ser grátis e no YouTube
YouTube
Como instalar o Bootstrap 4 via NPM (com Sass e Gulp) - BS4 + WP #01
Bem-vindo a série de vídeos que vai te ensinar a criar seu primeiro tema de WordPress usando Bootstrap 4.
Neste vídeo você irá aprender como instalar o Bootstrap 4 e como começar a usar o Sass. Vai aprender também como o Gulp pode facilitar sua vida na hora…
Neste vídeo você irá aprender como instalar o Bootstrap 4 e como começar a usar o Sass. Vai aprender também como o Gulp pode facilitar sua vida na hora…