Desenvolvimento Web

Slide 3 - Quem é o Professor

Professor de Física e Robótica com experiência em educação básica, itinerários formativos e competições científicas. Leciona Física de forma experimental e inovadora, conectando diferentes áreas do saber ao cotidiano. Formado em Licenciatura em Física (UCB), Técnico em Eletrônica (ETB) e Mestrado Nacional Profissional em Ensino de Física (UNB). Possui formação em Ciência de Dados e Engenharia de Software, com competências em programação, visão computacional e web design. Atualmente desenvolve projetos de robótica e análise de dados, engajando alunos em competições e eventos nacionais.

Slide 4 - Emenda

A disciplina aborda os fundamentos de Interação Humano-Computador (IHC), focando na criação de interfaces digitais centradas no usuário. Trata de User Experience (UX), User Interface (UI), design de interação e usabilidade. Capacita o desenvolvimento de aplicações web usando HTML, CSS e JavaScript, incluindo bibliotecas e frameworks para interfaces responsivas, acessíveis e interativas, integrando teoria e prática na construção de soluções digitais funcionais e estéticas.

Slide 5 - Habilidades


Analisar e aplicar fundamentos de Interação Humano-Computador (IHC) e design centrado no usuário.
Avaliar a usabilidade, acessibilidade e heurísticas de interfaces digitais.
Projetar interfaces web responsivas e acessíveis com conceitos de UX/UI.
Desenvolver páginas web estruturadas com HTML e estilos visuais com CSS.
Criar interatividade usando JavaScript, manipulando DOM, eventos e lógica básica.
Utilizar frameworks e bibliotecas modernas (Bootstrap, jQuery) para acelerar o desenvolvimento.
Construir protótipos navegáveis, testando soluções com usuários.
Trabalhar em equipe, organizando tarefas, comunicando ideias e usando controle de versão (Git).

Slide 6 - Competências


Compreender e aplicar fundamentos de Interação Humano-Computador (IHC) em interfaces centradas no usuário.
Projetar e avaliar aplicações digitais com princípios de UX/UI.
Estruturar páginas web com HTML seguindo boas práticas do W3C.

Criar layouts atrativos, responsivos e acessíveis com CSS.
Implementar funcionalidades interativas usando JavaScript básico, manipulando DOM e eventos.
Utilizar frameworks e bibliotecas modernas (Bootstrap, jQuery) para otimizar o desenvolvimento.
Trabalhar em equipe em projetos colaborativos, seguindo metodologias ágeis e prototipação iterativa.

Slide 7 - Conteúdo programático


Interação Humano-Computador (IHC): conceitos, histórico, princípios, ergonomia, normas e padrões de usabilidade.
User Experience (UX) e User Interface (UI): fundamentos, heurísticas de Nielsen, design centrado no usuário, arquitetura da informação, acessibilidade e responsividade.
HTML: estrutura básica, semântica, tags estruturais e formulários acessíveis.
CSS: seletores, propriedades, cores, fontes, layout com Flexbox e Grid, responsividade e especificidade.
JavaScript: variáveis, operadores, estruturas de controle, funções, manipulação do DOM, eventos e validações.
Frameworks CSS: introdução e uso de Bootstrap e Tailwind CSS para interfaces responsivas.
Bibliotecas JavaScript: introdução a React, Vue.js e Angular, com foco em desenvolvimento front-end e UX/UI.

Slide 8 - UNIDADE 1: Design de sistemas interativos


O Design de Sistemas Interativos é a área que projeta tecnologias fáceis e agradáveis de usar. Ele se baseia em cinco pilares principais:
Foco no Humano: A prioridade é entender e atender às necessidades do usuário, criando produtos intuitivos (princípio do Design Centrado no Usuário).
Variedade de Sistemas: Abrange todos os tipos de tecnologia com que interagimos, como celulares, smartwatches, assistentes de voz e painéis de carro.
Preocupações de Design: Leva em conta a usabilidade (facilidade de uso), acessibilidade (para todos os públicos) e a experiência do usuário (UX) geral.
Vida Digital: Reconhece e busca melhorar o impacto da tecnologia no nosso dia a dia.
Habilidades do Designer: Exige competências como empatia, pesquisa, prototipação e comunicação.

Slide 9 - UNIDADE 2: User Experience (UX) e User Interface (UI)


UX (Experiência do Usuário): É sobre como o uso de um produto parece e se sente — se é fácil, lógico e agradável.
UI (Interface do Usuário): É a parte visual do produto — os botões, cores, ícones e o layout da tela.

Para criar um bom produto digital, você precisa:
Focar no usuário: Entender e projetar para as pessoas.
Organizar a informação: Deixar tudo fácil de encontrar.
Garantir acessibilidade: Fazer com que funcione para todos.
Criar um design responsivo: Que se adapte a qualquer tela (celular, computador).
Seguir as Heurísticas de Nielsen: Usar regras básicas para não criar interfaces confusas.

Slide 10 - UNIDADE 3: HTML


HTML é o esqueleto: Define a estrutura e o conteúdo de uma página web (títulos, parágrafos, etc.).
CSS é a aparência: Veste o esqueleto com cores, fontes e layout, tornando a página visualmente agradável.
JavaScript é o comportamento: Adiciona interatividade e movimento, permitindo que a página responda às ações do usuário.
Em resumo, HTML cria o conteúdo, CSS o embeleza e JavaScript o torna funcional e dinâmico.

Slide 11 - UNIDADE 4: CSS


CSS dá a aparência: Ele define as cores, fontes e o layout da página, aplicando o design visual (UI) à estrutura HTML.
Ferramentas de Layout: Flexbox e Grid são usados para organizar o conteúdo de forma moderna e complexa.
Design Responsivo: Garante que o site se adapte e funcione bem em qualquer tela (celular, tablet, computador).
Bootstrap: É um atalho que oferece componentes visuais e layouts prontos para acelerar o desenvolvimento.

Slide 12 - UNIDADE 5: Linguagem JavaScript


JavaScript dá vida à página: É a linguagem que adiciona interatividade, comportamento e "inteligência" ao site.

O que ele faz? Ele manipula o HTML e o CSS dinamicamente, responde a ações do usuário (como cliques e preenchimento de formulários) e valida dados em tempo real.

Slide 13 - UNIDADE 6: Frameworks CSS


A Unidade 6 é sobre eficiência e velocidade no desenvolvimento web. Após aprender a construir e estilizar páginas manualmente, esta unidade introduz os Frameworks CSS, que são ferramentas para criar interfaces responsivas de forma muito mais rápida.

Os dois principais frameworks apresentados são:
Bootstrap: É como uma "caixa de LEGO" com componentes prontos (menus, botões, formulários). Você pega essas peças pré-estilizadas e monta seu site rapidamente. É ótimo para quem quer um design bonito e funcional sem precisar criar tudo do zero.
Tailwind CSS: É um framework "utilitário". Em vez de componentes prontos, ele oferece classes que funcionam como "micro-ajustes" de estilo (mudar uma cor, um espaçamento, uma borda). Isso dá mais liberdade para criar designs totalmente personalizados, mas ainda assim de forma muito ágil.

Slide 14 - UNIDADE 7: Principais bibliotecas JavaScript


A ideia principal é usar Bibliotecas e Frameworks JavaScript (como React, Vue.js e Angular) para construir a interface do usuário. Em vez de manipular cada elemento da página individualmente, essas ferramentas permitem criar "componentes" reutilizáveis (como um botão, um menu ou um card de produto) que gerenciam sua própria lógica e aparência.

Em resumo, esta unidade ensina a:

Ir além do JavaScript puro para construir aplicações web maiores e mais robustas.
Utilizar ferramentas modernas que são padrão na indústria do desenvolvimento front-end.
Construir interfaces complexas de forma organizada, escalável e com alto desempenho, sempre mantendo o foco na qualidade da experiência do usuário (UX/UI).

Slide 15 - Instrumento de Avaliação


A nota do curso é composta por cinco partes, com foco principal em atividades práticas e no projeto final.

Distribuição dos Pontos:

Atividades na plataforma: 30%
Trabalhos de UX/UI: 10%
Projeto Final (criação de um site): 30%
Perfil Profissional (LinkedIn/GitHub): 20%
Presença e Participação: 10%


Para ser aprovado, você precisa de no mínimo 75% de frequência nas aulas e obter a menção MM (Média) ou superior.

Slide 16 - Bibliografia Básica


A leitura básica foca nos pilares do curso:

Interação Humano-Computador (IHC): Os livros de Barreto e Benyon fornecem a base teórica sobre design e interação, fundamentais para as Unidades 1 e 2 (UX/UI).
Tecnologias Web: O livro de Alves é o guia prático para aprender HTML e CSS, cobrindo o conteúdo das Unidades 3 e 4.
Acessibilidade: O artigo de Neto et al. aprofunda um tema crucial da Unidade 2, mostrando uma aplicação prática da pesquisa em acessibilidade.

Bibliografia Complementar (Leituras de Apoio)

A leitura complementar serve para expandir o conhecimento em áreas específicas:
Fundamentos de Design: Os livros de Minsky e Pinto oferecem uma base teórica mais ampla sobre design.
Tecnologias Web: O livro de Oliveira & Zanetti é focado em JavaScript (Unidade 5), enquanto o de Teruel é outro guia prático para HTML5 (Unidade 3).
Estudo de Caso em UX: O artigo de Frederico et al. apresenta um exemplo real de um projeto de design de experiência do usuário (UX), mostrando a teoria na prática.