curso de_

Angular: Avançando no design de componentes com acessibilidade

Resumo do curso

  • Crie uma API modal do zero
  • Aplique regras de acessibilidade da WCAG
  • Aprenda a criar componentes dinamicamente
  • Descubra como o Angular funciona por debaixo dos panos
  • Avance no uso de diretivas
  • Crie animações com auxílio do módulo Animations

Público alvo

Desenvolvedores e desenvolvedoras Angular experientes e preocupados com a acessibilidade da sua aplicação.

Conteúdo relacionado

Cursos de Angular em Front-end

Leia nossos artigos de Front-end

Última atualização

21/10/2020

Já é aluno?

Comece o curso agora

10h

p/ conclusão

68

Atividades

186

Minutos de video

159

Alunos nesse curso

9.4

Nota deste curso

Certificado de participação

Instrutores

  • Flávio é desenvolvedor e instrutor, focado no desenvolvimento com Angular e procurando conciliar o frontend com o backend. Palestrou em conferências como QCON e MobileConf. É autor do best-seller "Cangaceiro JavaScript". Além da sua graduação e MBA em TI, também é graduado em Psicologia, aplicando os aprendizados desta área no desenvolvimento de software e de aplicações web.

Conteúdo Detalhado

  1. Definição de uma API

    • Visão geral da API Modal
    • Sobre uma API minimalista
    • Definindo a interface da nossa API
    • Injeção de ng-template
  2. Componente Modal

    • Minimizando as dependências do componente
    • Modal Component
    • ngTemplateOutlet
    • ComponentFactoryResolver
    • ComponentRef vs ModalRef
    • Um pouco sobre z-index e stacking order
    • O serviço BodyInjector
    • Sobre ApplicationRef
    • AttachView
    • Hostview
    • Sobre EmbeddedViewRef
  3. Lapidando nosso Componente

    • Estilizando o componente
    • Angular e o velho problema com animações
    • Introdução ao módulo Animations
    • FadeIn
    • As funções trigger, transition e style
    • FadeOut
    • Bônus: Animações com ngIf
    • Marcando um template para animação
    • Fechando o modal ao clicar no overlay
    • Parando a propagação de eventos
  4. Acessibilidade

    • A diretiva FocusTrap
    • HostListener
    • Finalizando FocusTrap
    • Atalho para fechamento do modal
    • A diretiva FocusBack
    • document.activeElement
  5. Avançando na acessibilidade

    • Suportando Screen Readers
    • Reactive Forms
    • Lidando com botões desabilitados
    • disabled vs aria-disabled
    • Acessibilidade e validação
    • O atributo aria-invalid
    • Diferenças entre screen readers

Ainda não estuda com a gente?

Invista na transformação da sua carreira!

Comece agora

Aprenda Angular com esse e outros cursos, comece agora!

  • 1265 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1265 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1265 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1265 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas