Criação de Aplicações Web Responsive com CSS3

Apresentação

Este curso ensina a criar aplicações web responsivas e acessíveis, com uma interface rica e compatível com a maior variedade possível de dispositivos ligados à internet. O participante aprenderá a desenvolver conteúdos de acordo com as Diretrizes de Acessibilidade para Conteúdo Web (WCAG), implementar navegação, formulários, tabelas de dados acessíveis e layouts adaptáveis. O programa inclui técnicas modernas de design mobile-first, utilização de flexbox, funções CSS3 e pseudo-seletores, bem como a integração do CSS com frameworks JavaScript como Angular e jQuery.

Enquadramento

O curso combina princípios de acessibilidade e usabilidade com ferramentas e práticas de design responsivo, utilizando CSS3 e pré-processadores como SASS, aplicados a projetos modernos e integrados com frameworks populares.

Destinatários

• Profissionais e entusiastas que pretendam desenvolver aplicações web responsivas e acessíveis com CSS3.

Pré-requisitos

• Experiência prévia em HTML.

Objetivo Geral

Capacitar os participantes para desenvolver interfaces web acessíveis, responsivas e modernas, aplicando padrões de acessibilidade e integração com frameworks JavaScript.

Objetivos Específicos

No final da formação, os participantes serão capazes de:

• Criar layouts responsivos que se adaptem a qualquer tamanho de ecrã e sistema operativo.
• Desenvolver sites web acessíveis de acordo com as normas WCAG.
• Utilizar tipografia web e unidades de medida responsivas.
• Criar formulários e tabelas de dados responsivos e acessíveis.
• Implementar SASS e criar modelos com Bootstrap 4.
• Integrar CSS em frameworks como Angular e jQuery.

Programa

1. Introdução às CSS (Cascading Style Sheets)
   • Relação entre HTML, JavaScript e CSS.
   • Conceito de browser moderno e acessibilidade web.
   • Criação de classes reutilizáveis.
   • Modelo de herança do CSS.
   • Otimização com CSS interno e externo.
   • Ferramentas de desenvolvimento no navegador.
2. CSS Box Model e Estilização de Conteúdos
   • Estrutura de caixas HTML (container box).
   • Diferenças entre elementos block e inline.
   • Cores, transparências e resets globais.
3. Seleção de Elementos e Atributos DOM
   • Seletores baseados em hierarquia DOM.
   • Seletores por comportamento e encadeamento.
   • Aplicação de funções de CSS.
4. Posicionamento e Layouts
   • Posição estática, absoluta, relativa e fixa.
   • Float e clear.
   • Flexible Box Model (Flexbox).
   • Colunas e grelhas CSS.
5. Tipografia Web
   • Fontes vs. tipos de letra.
   • Propriedades de texto, letra e linha.
   • Utilização de fontes da web.
6. Formulários e Tabelas de Dados Acessíveis e Responsivos
   • Interpretações regionais de acessibilidade.
   • Formulários compatíveis com WCAG.
   • Validação com HTML5.
   • Tabelas de dados responsivas e acessíveis.
7. Pré-processadores CSS e Bootstrap
   • Introdução a SASS e LESS.
   • Instalação e utilização de Ruby e SASS no Windows.
   • Compilação SCSS para CSS.
   • Utilização do Bootstrap 4.
8. Integração com DOM e Frameworks JavaScript (MVC)
   • Animações com CSS puro.
   • Toggles de menu com JavaScript.
   • Manipulação de seletores CSS com jQuery e Angular.
   • Implementação de scrolling responsivo e infinito.