Desenvolvimento Interfaces
AULA 1
Sr Wendell Cruzeiro
Slide 3
Professor de Física e Robótica com experiência
diversificada em educação básica, itinerários formativos e
competições científicas. Ministro aulas de Física desde
antes da minha graduação, aplicando metodologias
inovadoras e experimentais, que conectam diferentes áreas
do saber à física aplicada no cotidiano. Minha trajetória inclui
formações e experiências relevantes:
Licenciatura em Física
pela UCB (2016), Técnico em Eletrônica pela ETB
(2018-2019), Mestrado Nacional Profissional em Ensino de
Física - Polo 01-UNB (2018-2020), Cientista de dados
(2022-2023) e Engenharia de Software (2022-2026).
Ementa
Slide 4
A disciplina apresenta os fundamentos da Interação
Humano-Computador (IHC),com foco na criação de interfaces
digitais centradas no usuário.Aborda os conceitos de User
Experience (UX) e User Interface (UI), introduzindo princípios de
design de interação e usabilidade. Capacita o estudante a
desenvolver aplicações web por meio das tecnologias HTML,
CSS e JavaScript, além de explorar bibliotecas e frameworks
voltados à criação de interfaces responsivas, acessíveis e
interativas.
Habilidades
Slide 5
Fundamentos e Apliocação
Compreender e aplicar fundamentos de IHC, UX e UI no desenvolvimento de sistemas centrados no usuário.
Avaliação e Projeto de Interfaces
Avaliar e projetar interfaces responsivas, acessíveis e de fácil usabilidade.
Desenvolvimento Web
Criar páginas web estruturadas em HTML, estilizadas com CSS e interativas com JavaScript.
Uso de Frameworks e Bibliotecas
Utilizar frameworks e bibliotecas (ex.: Bootstrap, jQuery) para agilizar e padronizar o design.
Prototipagem e Testes
Produzir protótipos navegáveis, realizar testes com usuários e trabalhar em equipe com controle de versão.
Acessibilidade Digital
Garantir acessibilidade digital para diferentes necessidades
Competências
Slide 6
IHC
Aplicar fundamentos no desenvolvimento de interfaces centradas no usuário.
UX/UI
Utilizar princípios para criar e avaliar aplicações digitais.
HTML
Estruturar páginas seguindo padrões do W3C.
CSS
Criar layouts atrativos, responsivos e acessíveis.
JavaScript
Implementar interatividade e manipulação do DOM.
Conteúdo programático
Slide 7
Unidade 1 – IHC
Fundamentos, princípios e usabilidade.
Unidade 2 – UX/UI
Princípios, heurísticas e design centrado no usuário.
Unidade 3 – HTML
Estrutura básica e formulários acessíveis.
Unidade 4 – CSS
Estilos, layout responsivo e especificidade.
Unidade 5 – JavaScript
Lógica, DOM, eventos e validações.
Conteúdo programático
Slide 8
Importância do Foco no Humano
Necessidade de design centrado no usuário.
Variedade de Sistemas Interativos
Diversidade de sistemas com os quais usuários interagem.
Preocupações de Design
Desafios e considerações no design de sistemas.
Vida Digital
Impacto e integração da tecnologia no dia a dia.
Habilidades de Designer
Competências necessárias para criar sistemas eficazes.
UNIDADE 2: User Experience (UX) e User
Interface (UI)
Slide 9
Princípios básicos de UX e UI.
Design Centrado no Usuário
Ênfase nas necessidades dos usuários.
Acessibilidade
Design inclusivo para todos, incluindo pessoas com deficiência.
Heurísticas de Nielsen
Diretrizes para o design de interface do usuário.
Arquitetura da Informação
Organização e estruturação do conteúdo.
Responsabilidade
Design que se adapta a diferentes tamanhos de tela.
Ferramentas e Análise
Tecnologias, contextos, atividades, usuários e problemas envolvidos na análise.
UNIDADE 3: HTML (Hypertext Markup
Language)
Slide 10
Introdução ao HTML
HTML é uma linguagem essencial para estruturar conteúdos na web.
Plataformas de Publicação
Disponibilizamos serviços para hospedar e implementar sites.
Portfólio/Currículo
Ferramentas úteis para visualização de habilidades e experiências profissionais.
Atributos Globais
Atributos que podem ser aplicados a todos os elementos HTML.
Evolução do HTML
Comparação entre HTML4 e HTML5, mostrando as melhorias nos padrões HTML.
Formulários
Elementos interativos que permitem a entrada de dados por parte dos usuários.
UNIDADE 4: CSS (Cascading Style Sheets)
Slide 11
Layout com Flexbox e Grid
Explore técnicas de layout avançadas usando Flexbox e Grid.
Design Responsivo
Entenda como criar designs responsivos para diferentes tamanhos de tela.
Introdução ao Bootstrap
Comece a aprender o framework Bootstrap para desenvolvimento web.
Containers Bootstrap
Explore como usar containers do Bootstrap para layouts eficazes.
Modelos Bootstrap
Aprenda a construir sites usando modelos Bootstrap.
UNIDADE 5: Linguagem JavaScript
Slide 12
JavaScript é uma linguagem essencial para o desenvolvimento web, abrangendo diversos conceitos fundamentais.
Manipulação do DOM
Seleção: identificar elementos HTML.
Modificação: Alterar conteúdo e estilo.
Eventos
Clique: Interações de clique.
Mouseover: Ações ao passar o mouse.
Estruturas de Controle
Se: Condicional simples.
Switch: Decisões múltiplas.
Para: Laço de repetição.
Enquanto: Laço baseado em condição.
Variáveis
Declaração: Movimentação de dados.
Atribuição: Alocação de valores.
Operadores
Aritméticos: Cálculos básicos.
Lógicas: Conectividade de condições.
Funções
Definição: Criação de blocos de código.
Chamada: Execução de funções definidas.
Validações
Formulários: Checagem de entradas.
Dados: Garantia de integridade.
UNIDADE 6: Frameworks CSS
Slide 13
Introdução ao Bootstrap
Uma visão geral do Bootstrap, um framework CSS popular.
Uso do Bootstrap
Aplicações práticas do Bootstrap para criar interfaces responsivas.
Introdução ao Tailwind CSS
Uma visão geral do Tailwind CSS, um framework CSS moderno.
Uso do Tailwind CSS
Aplicações práticas do Tailwind CSS para criar interfaces responsivas.
UNIDADE 7: Principais bibliotecas
JavaScript
Slide 14
Foco em UX/UI
Fase na experiência do usuário e design de interface.
Reagir
Uma biblioteca para construir interfaces de usuário.
Vue.js
Um framework progressivo para construir interfaces de usuário.
Angular
Uma plataforma para construir aplicações web e móveis.
Desenvolvimento Front-End Moderno
Integração das bibliotecas/frameworks mencionadas para criar aplicações eficientes e centradas no usuário.