Aplicações Digitais: Planejamento e Produção
Bem-vindo ao curso que transformará sua visão sobre desenvolvimento de aplicações digitais. Nesta jornada, você dominará desde o planejamento visual até a implementação técnica de soluções interativas.
Objetivos da Aula Inaugural
1
Apresentação do Plano de Ensino
Conhecer a estrutura completa do curso, métodos de avaliação e expectativas para o semestre.
2
Revisão de Lógica e POO com Java
Reforçar conceitos fundamentais de programação que servirão como base para o desenvolvimento de aplicações mais complexas.
3
Introdução às Aplicações Web
Compreender os princípios básicos que regem o funcionamento de sistemas baseados na web e suas tecnologias principais.
Estrutura da Disciplina
Nossa disciplina foi cuidadosamente estruturada para proporcionar uma experiência de aprendizado completa, com equilíbrio entre teoria e prática:
  • Carga horária total: 72 horas
  • Aulas teóricas: 8 horas
  • Aulas práticas: 64 horas
O foco principal está na produção digital e no desenvolvimento de aplicações web, com ênfase em atividades práticas que simularão desafios reais do mercado.
A Importância das Aplicações Digitais

As soluções computacionais modernas vão muito além do código, exigindo foco em design e interação para entregar experiências completas aos usuários.
No cenário atual, o desenvolvimento de aplicações digitais representa um dos campos mais dinâmicos e essenciais da tecnologia. Aqui você aprenderá a criar soluções que não apenas funcionam tecnicamente, mas que também proporcionam experiências significativas para os usuários.
Esta disciplina é fundamental para sua formação porque integra conhecimentos técnicos de programação com princípios de design e usabilidade, preparando-o para os desafios multidisciplinares do mercado de trabalho.
Projeto Semestral: Da Ideia à Implementação
O projeto semestral será o fio condutor de todo o aprendizado, permitindo que você aplique progressivamente os conhecimentos adquiridos. Esta jornada completa de desenvolvimento inclui:
Prototipação
Definição de requisitos e criação de wireframes usando ferramentas como Figma.
Design Visual
Elaboração da identidade visual e elementos de interface com GIMP e Inkscape.
Implementação
Desenvolvimento do código frontend e backend com as tecnologias estudadas.
Apresentação
Documentação e demonstração do projeto utilizando OBS Studio.
Competências que Você Irá Desenvolver
1
Design de Interfaces
Criação de interfaces intuitivas e esteticamente atraentes, aplicando princípios de design visual e usabilidade.
2
Programação Web
Desenvolvimento de aplicações responsivas e funcionais utilizando HTML, CSS, JavaScript e Java para backend.
3
Interação Humano-Computador
Aplicação de princípios que tornam os sistemas computacionais mais acessíveis, eficientes e agradáveis para os usuários.
Estas competências são altamente valorizadas no mercado de trabalho e formam a base para diversas carreiras em tecnologia e design digital.
Conteúdo Programático Abrangente
Frontend
  • HTML5 semântico
  • CSS3 e frameworks
  • JavaScript básico
  • Responsividade
Backend
  • Java aplicado à web
  • Conexão com APIs
  • Banco de dados SQLite
  • Arquitetura cliente-servidor
UX/UI
  • Prototipação
  • Design responsivo
  • Usabilidade
  • Acessibilidade básica
Metodologia de Ensino Prática
Nossa abordagem metodológica é fundamentada na prática e na colaboração, criando um ambiente de aprendizado dinâmico e produtivo:
  • Aulas hands-on: Aplicação imediata dos conceitos em exercícios práticos
  • Projetos colaborativos: Desenvolvimento em grupo simulando ambientes reais de trabalho
  • Quizzes interativos: Avaliações rápidas para fixação de conteúdo
  • Fóruns de discussão: Troca de ideias e soluções entre os participantes
Sistema de Avaliação
30%
Prova Prática
Avaliação individual realizada em laboratório, aplicando os conceitos estudados na resolução de problemas reais.
50%
Projeto em Grupo
Desenvolvimento colaborativo de uma aplicação completa, desde o planejamento até a implementação final.
20%
Quizzes
Série de avaliações rápidas individuais aplicadas ao longo do semestre para verificar a compreensão dos conteúdos.
Este sistema de avaliação foi pensado para valorizar tanto o trabalho individual quanto a capacidade de colaboração em equipe, habilidades essenciais no mercado de trabalho atual.
Ferramentas Institucionais
Durante o curso, você terá acesso a um conjunto completo de ferramentas profissionais para o desenvolvimento de seus projetos:
  • Design e Prototipação: Figma, Canva
  • Edição Gráfica: GIMP, Inkscape
  • Desenvolvimento: CodeSandbox, Visual Studio Code
  • Banco de Dados: SQLite
  • Apresentação: OBS Studio
Todas estas ferramentas estão disponíveis nos laboratórios da instituição e possuem versões gratuitas para uso em seus computadores pessoais.
Ferramentas para Planejamento e Design Visual
Figma
Plataforma colaborativa para prototipação de interfaces, permitindo a criação de wireframes interativos e o compartilhamento em tempo real com a equipe.
  • Criação de wireframes
  • Prototipação interativa
  • Compartilhamento e feedback
Canva
Ferramenta intuitiva para criação de elementos gráficos, ideal para estudantes sem experiência prévia em design, permitindo a produção rápida de mockups.
  • Templates prontos
  • Biblioteca de elementos
  • Exportação em diversos formatos
Ferramentas para Design Gráfico e Codificação
GIMP e Inkscape
Softwares livres para edição de imagens raster e vetoriais, essenciais para a criação de elementos gráficos como logos, ícones e ilustrações para suas aplicações.
CodeSandbox e VS Code
Ambientes de desenvolvimento integrado que facilitam a escrita de código HTML, CSS e JavaScript, com recursos de previsualização em tempo real e integração com sistemas de controle de versão.
OBS Studio: Documentação e Apresentação
O Open Broadcaster Software (OBS) Studio será utilizado como ferramenta oficial para a documentação e apresentação dos projetos finais, permitindo:
  • Gravação de tela com alta qualidade
  • Captura de áudio para narração
  • Adição de webcam para apresentações mais pessoais
  • Edição básica de vídeos de demonstração
  • Streaming ao vivo (para apresentações remotas)
Esta habilidade de documentação visual é extremamente valorizada no mercado de trabalho atual, onde a capacidade de comunicar ideias técnicas é tão importante quanto desenvolvê-las.
Alinhamento com o Plano de Ensino
1
Fundamentação Teórica
As ferramentas selecionadas cobrem todos os aspectos teóricos necessários para o entendimento dos princípios de design e desenvolvimento web.
2
Prática Profissional
O conjunto de aplicativos escolhidos reflete o ecossistema real utilizado no mercado de trabalho, preparando os alunos para desafios profissionais.
3
Interdisciplinaridade
As ferramentas permitem a integração de conhecimentos de programação, design e comunicação, fundamentais para o desenvolvimento completo de aplicações digitais.
Este alinhamento cuidadoso garante que você saia do curso não apenas com conhecimento teórico, mas com habilidades práticas altamente aplicáveis no mercado.
Regras e Expectativas
Participação Ativa
Espera-se presença e engajamento nas aulas práticas, com contribuições significativas nos fóruns de discussão e atividades em grupo.
Cumprimento de Prazos
Todas as entregas têm datas definidas no cronograma. Atrasos resultarão em penalidades na nota, simulando o ambiente profissional.
Ética Acadêmica
Todo código e design deve ser original ou devidamente creditado. Plágio resultará em nota zero na atividade e possíveis sanções disciplinares.
Colaboração Produtiva
Nos projetos em grupo, espera-se contribuição equilibrada de todos os membros, com documentação clara do papel de cada um.
O que é um Algoritmo?
Um algoritmo é uma sequência finita e bem definida de passos lógicos que resolvem um problema específico. É a base fundamental de qualquer solução computacional, independentemente da linguagem de programação utilizada.
No contexto das aplicações digitais, os algoritmos são responsáveis por:
  • Processar entradas de usuários
  • Manipular dados e informações
  • Gerar respostas e saídas esperadas
  • Controlar o fluxo de execução do programa
Tipos de Dados e Variáveis
Tipos Primitivos
  • int: números inteiros (1, 42, -10)
  • double/float: números reais (3.14, -0.01)
  • boolean: valores lógicos (true, false)
  • char: caracteres únicos ('a', '5', '+')
Tipos Compostos
  • String: textos ("Olá mundo")
  • Array: coleções ordenadas de mesmo tipo
  • ArrayList: arrays dinâmicos
  • HashMap: coleções de pares chave-valor
Declaração em Java
String nome = "Maria"; int idade = 25; double altura = 1.68; boolean ativo = true;
Em Java, toda variável precisa ter um tipo definido, o que torna a linguagem fortemente tipada. Isso ajuda a prevenir erros durante o desenvolvimento.
Estruturas Condicionais
if-else
if (idade >= 18) { System.out.println("Maior de idade"); } else { System.out.println("Menor de idade"); }
Permite executar blocos de código com base em uma condição booleana. Podemos encadear múltiplas condições com else if.
switch-case
switch (diaDaSemana) { case 1: System.out.println("Domingo"); break; case 2: System.out.println("Segunda"); break; default: System.out.println("Dia inválido"); }
Ideal para testar uma variável contra múltiplos valores constantes, evitando longos blocos if-else.
Estruturas de Repetição
for
for (int i = 0; i < 5; i++) { System.out.println(i); }
Ideal quando sabemos antecipadamente o número de iterações.
while
int i = 0; while (i < 5) { System.out.println(i); i++; }
Executa enquanto a condição for verdadeira, podendo nunca executar.
do-while
int i = 0; do { System.out.println(i); i++; } while (i < 5);
Garante pelo menos uma execução, depois verifica a condição.
As estruturas de repetição são essenciais para processar coleções de dados, implementar algoritmos e automatizar tarefas repetitivas em aplicações digitais.
Funções e Métodos
Funções são blocos de código nomeados que executam uma tarefa específica. Em Java, as funções são chamadas de métodos e estão sempre associadas a classes.
Benefícios
  • Reutilização de código
  • Organização e legibilidade
  • Modularização do programa
  • Manutenção simplificada
  • Testabilidade melhorada
Exemplo em Java
public int soma(int a, int b) { return a + b; } public void saudacao(String nome) { System.out.println("Olá, " + nome); }
Programação Orientada a Objetos
A Programação Orientada a Objetos (POO) é um paradigma que organiza o código em torno de objetos, que combinam dados (atributos) e comportamentos (métodos).
Este paradigma permite:
  • Representar entidades do mundo real no código
  • Reutilizar código de forma eficiente
  • Manter o software organizado e extensível
  • Trabalhar em diferentes níveis de abstração
Classes e Objetos: Base da POO
Classe
É um modelo ou template que define a estrutura (atributos) e comportamentos (métodos) que objetos desse tipo terão.
public class Carro { private String modelo; private int ano; public void acelerar() { System.out.println("Acelerando..."); } }
Objeto
É uma instância concreta de uma classe, com valores específicos para seus atributos.
Carro meuCarro = new Carro(); meuCarro.modelo = "Sedan"; meuCarro.ano = 2023; meuCarro.acelerar();
Na analogia clássica, a classe é como a planta de uma casa, enquanto o objeto é a casa construída seguindo aquela planta. Podemos criar múltiplas casas (objetos) a partir da mesma planta (classe).
Encapsulamento
O encapsulamento é um dos pilares da POO que consiste em proteger os atributos de uma classe, controlando o acesso a eles através de métodos específicos.
Modificadores de Acesso
  • private: Acessível apenas dentro da classe
  • protected: Acessível na classe e subclasses
  • public: Acessível em qualquer lugar
  • default: Acessível no mesmo pacote
Métodos de Acesso
private String nome; // Getter public String getNome() { return nome; } // Setter public void setNome(String nome) { this.nome = nome; }
Herança e Polimorfismo
Herança
Permite que uma classe (subclasse) herde atributos e métodos de outra classe (superclasse), estabelecendo uma relação "é um" entre elas.
public class Animal { public void emitirSom() { System.out.println("Som genérico"); } } public class Cachorro extends Animal { @Override public void emitirSom() { System.out.println("Au au"); } }
Polimorfismo
Permite que objetos de diferentes classes sejam tratados como objetos de uma classe comum, respondendo de forma diferente ao mesmo método.
Animal meuAnimal = new Cachorro(); meuAnimal.emitirSom(); // Imprime "Au au" Animal outroAnimal = new Gato(); outroAnimal.emitirSom(); // Imprime "Miau"
Exemplo Completo de Classe em Java
public class Produto { // Atributos (encapsulados) private String nome; private double preco; private int quantidadeEstoque; // Construtor public Produto(String nome, double preco) { this.nome = nome; this.preco = preco; this.quantidadeEstoque = 0; } // Getters e Setters public String getNome() { return nome; } public double getPreco() { return preco; } public void setPreco(double preco) { if (preco > 0) { this.preco = preco; } } // Métodos específicos public void adicionarEstoque(int quantidade) { if (quantidade > 0) { this.quantidadeEstoque += quantidade; } } public boolean vender(int quantidade) { if (quantidade <= quantidadeEstoque) { quantidadeEstoque -= quantidade; return true; } return false; } }
O que é uma Aplicação Web?
Uma aplicação web é um software que roda em navegadores e funciona através da internet ou de uma rede local. Diferente dos softwares tradicionais, não precisa ser instalada no computador do usuário.
Características:
  • Acessível de qualquer dispositivo com navegador
  • Atualizações centralizadas no servidor
  • Arquitetura cliente-servidor
  • Frontend (interface) + Backend (processamento)
HTML e CSS: A Base Visual da Web
HTML
HTML (HyperText Markup Language) é a linguagem de marcação que define a estrutura e o conteúdo das páginas web, organizando os elementos em uma hierarquia de tags.
<div class="produto"> <h2>Smartphone XYZ</h2> <p>Um smartphone incrível!</p> <button>Comprar</button> </div>
CSS
CSS (Cascading Style Sheets) é a linguagem que controla a apresentação visual dos elementos HTML, definindo cores, tamanhos, posicionamentos e animações.
.produto { border: 1px solid #ddd; padding: 15px; border-radius: 8px; } .produto h2 { color: #3366cc; font-size: 18px; }
Páginas Estáticas vs. Dinâmicas
Páginas Estáticas
  • Conteúdo fixo em HTML puro
  • Mesma exibição para todos os usuários
  • Não interagem com banco de dados
  • Ideal para conteúdo informativo simples
  • Fáceis de criar e hospedar
Exemplo: páginas de documentação, sites institucionais simples.
Páginas Dinâmicas
  • Conteúdo gerado em tempo real
  • Personalização baseada no usuário
  • Interação com banco de dados
  • Formulários e funcionalidades interativas
  • Requerem programação no backend
Exemplo: redes sociais, e-commerces, sistemas de gestão.
CodeSandbox: Ambiente de Desenvolvimento Web
O CodeSandbox é uma plataforma de desenvolvimento online que permite escrever, testar e compartilhar código web diretamente no navegador, sem necessidade de configurações complexas.
Recursos Principais
  • Editor de código com destaque de sintaxe
  • Previsualização em tempo real
  • Suporte a HTML, CSS, JavaScript e frameworks
  • Compartilhamento de projetos via URL
Vantagens para Estudantes
  • Não requer instalação local
  • Acessível de qualquer dispositivo
  • Facilita o trabalho colaborativo
  • Ideal para iniciantes em desenvolvimento web
Tarefa Prática Inicial
Parte 1: Wireframe no Figma
  1. Criar uma conta gratuita no Figma (se não tiver)
  1. Desenvolver um wireframe simples para uma página de perfil de usuário
  1. Incluir pelo menos: cabeçalho, foto de perfil, informações pessoais e menu de navegação
  1. Compartilhar o link do projeto no fórum da disciplina
Parte 2: Esboço HTML no CodeSandbox
  1. Acessar o CodeSandbox e criar um novo projeto HTML/CSS
  1. Implementar a estrutura básica HTML do wireframe criado
  1. Aplicar estilos CSS simples para organizar os elementos
  1. Adicionar pelo menos um elemento interativo (botão, formulário)
Esta tarefa será a base para as próximas aulas e deve ser entregue até o próximo encontro. O objetivo é aplicar imediatamente os conceitos introdutórios e familiarizar-se com as ferramentas que utilizaremos durante todo o curso.