Desenvolvimento de Interfaces

M.sc Wendell Cruzeiro

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). Possuo competências nas áreas de ciência de dados, visão computacional e web design, integrando tecnologia e programação às minhas práticas pedagógicas. Atualmente, desenvolvo projetos de robótica, programação e análise de dados, engajando alunos em competições e eventos de destaque nacional.

Ementa

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. Integra teoria e prática com vistas à construção de soluções digitais funcionais e esteticamente adequadas.

Habilidades


Analisar e interpretar os fundamentos da Interação Humano-Computador e sua relevância no desenvolvimento de sistemas digitais centrados no usuário.

Avaliar criticamente a usabilidade de interfaces com base em heurísticas, acessibilidade e princípios de design centrado no usuário.

Projetar interfaces digitais responsivas e acessíveis, aplicando conceitos de UX/UI em ambientes web.

Codificar páginas web estruturadas com HTML, organizando corretamente cabeçalhos, parágrafos, listas, formulários e links.

Aplicar regras de estilo com CSS, desenvolvendo layouts visuais com cores, tipografias, grids e posicionamento de elementos.

Criar interatividade com JavaScript, manipulando eventos, elementos do DOM, variáveis e estruturas condicionais.

Utilizar frameworks e bibliotecas modernas (como Bootstrap e jQuery) para agilizar o desenvolvimento e garantir responsividade e padronização visual.

Construir protótipos navegáveis e iterativos, empregando ferramentas digitais de design e testes com usuários.

Colaborar em projetos em equipe, organizando tarefas, comunicando ideias e utilizando controle de versão (como Git, se aplicado).

Aplicar princípios de acessibilidade digital, garantindo que os produtos sejam utilizáveis por pessoas com diferentes necessidades.

Competências


Compreender os fundamentos da Interação Humano-Computador (IHC) e sua aplicação no desenvolvimento de interfaces digitais centradas no usuário.

Identificar e aplicar princípios de UX (User Experience) e UI (User Interface) no design e avaliação de aplicações digitais.

Utilizar corretamente a linguagem HTML para estruturação de páginas web, respeitando padrões e boas práticas do W3C.

Aplicar estilos com CSS para construção de layouts atrativos, responsivos e acessíveis.

Implementar funcionalidades interativas em páginas web utilizando JavaScript básico, compreendendo lógica, eventos e manipulação do DOM.

Utilizar frameworks e bibliotecas modernas (como Bootstrap, jQuery ou similares) para agilizar e otimizar o processo de desenvolvimento web.

Trabalhar em equipe e desenvolver projetos colaborativos, respeitando metodologias ágeis e processos de prototipação iterativa.

Analisar criticamente soluções digitais com foco na acessibilidade, usabilidade e experiência do usuário.

Conteúdo Programático


Unidade 1 Interação Humano-Computador (IHC): conceitos, histórico, princípios, ergonomia, normas e padrões de usabilidade.

Unidade 2 User Experience (UX) e User Interface (UI): fundamentos, heurísticas de Nielsen, design centrado no usuário, arquitetura da informação, acessibilidade e responsividade.

Unidade 3 HTML (Hypertext Markup Language): estrutura básica, semântica, tags estruturais e formulários acessíveis.

Unidade 4 CSS (Cascading Style Sheets): seletores, propriedades, cores, fontes, layout com Flexbox e Grid, responsividade e especificidade.

Unidade 5 Linguagem JavaScript: variáveis, operadores, estruturas de controle, funções, manipulação do DOM, eventos, validações.

Unidade 6 Frameworks CSS: introdução e uso de ferramentas como Bootstrap e Tailwind CSS no desenvolvimento de interfaces responsivas.

Unidade 7 Principais bibliotecas JavaScript: introdução ao uso de bibliotecas modernas como React, Vue.js e Angular no contexto de desenvolvimento front-end com foco em UX/UI.

UNIDADE 1: Design de sistemas interativos


Importância do Foco Humano: A necessidade de design centrado no usuário.

Variedade de Sistemas Interativos: A gama de sistemas com os quais os usuários interagem.

Preocupações de Design: Considerações e desafios no design de sistema.

Habilidade de Designer: As competências necessárias para criar sistemas eficazes

Vida Digital: O impacto e integração da tecnologia na vida diária.

UNIDADE 2: User Experience (UX) e User Interface (UI): fundamentos, heurísticas de Nielsen, design centrado no usuário, arquitetura da informação, acessibilidade e responsividade.


Fundamentos: Princípios básicos de UX e UI

Design Centrado no Usuário: Design com foco nas necessidades do usuário

Acessibilidade: Design para todos os usuários, incluindo aqueles com deficiência

Heurísticas de Nielsen: Diretrizes para design de interface do usuário

Arquitetura da Informação: Organização e estruturação do conteúdo

Responsividade: Design que se adapta a diferentes tamanhos da tela

UNIDADE 3: HTML (Hypertext Markup Language): estrutura básica, semântica, tags estruturais e formulários acessíveis.


Plataformas de Publicação: Serviços para hospedar e implantar sites

HTML: A linguagem fundamental para estruturar conteúdo web

Portfólio/Currículo: Ferramentas para mostrar habilidades e experiências

HTML4 X HTML5: A evolução dos padrões HTML

Atributos Globais: Atributos aplicavéis a todos os elementos HTML

Formulários: Elementos interativos para entrada de dados do usuário

UNIDADE 4: CSS (Cascading Style Sheets): seletores, propriedades, cores, fontes, layout com Flexbox e Grid, responsividade e especificidade.


Fundamentos de CSS: Aprenda os conceitos básicos de CSS, incluindo seletores e propriedades.

Layout com Flexbox e Grid: Explore técnicas de layout avançadas usando Flexbox e Grid

Design Responsvo: 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 Bootstrap para layouts eficazes

Modelos Bootstrap: Aprenda a construir sites usando modelos Bootstrap

UNIDADE 5: Linguagem JavaScript: variáveis, operadores, estruturas de controle, funções, manipulação do DOM, eventos, validações.

Linguagem JavaScript


Modificação do DOM
Seleção
Modificação

Eventos
Click
Mouseover

Variáveis
Declaração
Atribuição

Estruturas de Controle
If
Switch
For
While

Operadores
Aritmáticos
Lógicos

Funções
Definição
Chamada

Validações
Formulários
Dados

UNIDADE 6: Frameworks CSS: introdução e uso de ferramentas como Bootstrap e Tailwind CSS no desenvolvimento de interfaces responsivas.


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: introdução ao uso de bibliotecas modernas como React, Vue.js e Angular no contexto de desenvolvimento front-end com foco em UX/UI.


React: Uma biblioteca para construir interfaces de usuário

Foco em UX/UI: Ênfase na experiência do usuário e design de interface

Vue.js: Um framework progressivo para construir interfaces de usuário

Angular: Uma plataforma para construir aplicações web e móveis

Instrumentos de Avaliação


Atividades práticas na plataforma online

Trabalhos individuais e/ou em grupo (UX/UI, IHC)

Projeto final (site funcional e responsivo)

Currículo / LinkedIn / GitHub (perfil profissional atualizado)

Assiduidade (controle de faltas e participação regular)

Critérios Importantes


Frequência mínima obrigatória: 75% de presença (mais de 25% de faltas implica reprovação)

Menção mínima para aprovação: MM

Avaliação contínua: Toda aula possui atividade avaliativa

Envio das atividades: Obrigatoriamente na plataforma online

Entrega das atividades: Individual, mesmo em atividades realizadas em grupo

Distribuição das atividades: Atividades distribuídas entre A1 (40%) e A2 (60%)

Bibliografia Básica


ALVES, William P. HTML & CSS: aprenda como construir páginas web. São Paulo: Expressa, 2021. MINHA BIBLIOTECA

BARRETO, Jeanine dos S. et al. Interface humano-computador. Porto Alegre: SAGAH, 2019. MINHA BIBLIOTECA

BENYON, David. Interação humano-computador. 2. ed. São Paulo: Pearson, 2011. PEARSON

NETO, N. G. da S.; MEDEIROS, F. P. A. de; ARAÚJO, R. P.; SILVA, A. M. da. Acessibilidade em dispositivos móveis: uma análise sob a perspectiva das pesquisas em interação humano computador no Brasil. Brazilian Journal of Development, [S. l.], v. 7, n. 4, p. 34137–34150, 2021. DOI: 10.34117/bjdv7n4-053. Disponível em: https://ojs.brazilianjournals.com.br/ojs/index.ph p/BRJD/article/view/27568

Bibliografia Complementar


MINSKY, Tânia Maria Sanches. Fundamentos do design. 1. ed. Curitiba: Intersaberes, 2021.

PINTO, Maria Verônica Silva. Elementos do design: estágios, metodologias e teorias. Curitiba: Intersaberes, 2022.

OLIVEIRA, Cláudio Luís V.; ZANETTI, Humberto Augusto P. JavaScript descomplicado: programação para Web, IoT e dispositivos móveis. São Paulo: Érica, 2020.

TERUEL, Evandro C. HTML 5 - Guia Prático. 2. ed. São Paulo: Saraiva, 2013.

FREDERICO, C. S. et al. Mobile application for bus operations controlled by passengers: A user experience design project (UX). Case Studies on Transport Policy, v. 9, n. 1, p. 172–180, 2021. DOI: 10.1016/j.cstp.2020.11.014.