ermogenes / aulas-programacao-web

Materiais de Aula - Programação de Computadores com tecnologias Web

Programação de Computadores com tecnologias Web

Site de apoio - Programação de Computadores II

Etec Adolpho Berezin

🎞 Este curso no YouTube:

• Canal: Prof. Ermogenes Palacio
• Canal: Prof. Diego Neri
• Playlist com todos os vídeos

Conteúdo

Legenda: 📷 Slides | 📺 Vídeo-aula no YouTube | 📖 Material em texto e imagens | 🤝 colab

Materiais úteis

• 📺 📖 Novos templates .NET 6
• 📖 GitHub em computadores compartilhados

👔 Introdução à web

• 📷 Programação para web
• 📺 Apresentação

🐢 Frontend

• 📺 📖 Hello World com GitHub Pages
• 📺 📖 Marcação HTML
• 📺 📖 Estilos CSS

🕷 Marcação e estilização

• 📺 📖 Tipografia
• 📺 📖 Cores e fundos
• 📺 📖 Box-model
• 📺 📖 Tamanho e posicionamento
• 📺 📖 Transições e animações
• 📺 📖 Leiaute
• 📺 [Live] Entendendo o Flexbox
• 📺 📖 Responsividade
• 📺 📖 Mobile-first holy grail
• 📺 📖 Formulários
• 📺 📖 Bibliotecas CSS e CDN

🔋 JavaScript

• 📺 📖 Hello World com JavaScript
• 📺 📖 Sintaxe e estruturas básicas
• 📺 📖 Objetos
• 📺 📖 Funções
• 📺 📖 DOM - Document Object Model
• 📺 📖 Assincronia e Fetch API
• 📖 Web Storage 🤝 Prof. Neri
• 📺 [Live] Jogos 2D com Phaser

🛢 Banco de dados com Entity Framework Core e MySQL

• 📖 Criação de ambiente MySQL
• 📺 📖 Bancos de dados com MySQL
• 📺 📖 CRUD com EF Core

🔌 Backend

• 📺 📖 Backend com Minimal APIs
• 📺 📖 REST e bancos de dados

🌍 Links úteis e outros recursos

Outros materiais - antigos ou de tópicos removidos (mas ainda úteis)

🥋 Exercícios

• 🏳 Marcação HTML
• 🎨 Tipografia
• 🎨 Cores e fundos
• 🎨 Box-model, tamanho e posicionamento
• 🎨 Leiaute e responsividade
• 🏳 Formulários
• 🚀 Projeto prático: HTML e CSS
• 🔋 Primeiros passos com JavaScript
• 🔋 Objetos, funções e DOM
• 🔋 Fetch API
• 🛢 CRUD com MySQL
• 🔌 Backend com Minimal APIs
• 🔌 REST e bancos de dados
• 🚀 Projeto prático

Soluções comentadas

• Prof. Ermogenes
  • 📺 Exercício: PesoIdeal em JavaScript | 🕸 solução
  • 📺 Exercício: Pokedex | 🕸 solução
  • 📺 Exercício: TVShowsSearch | 🕸 solução
  • 📺 Exercício: Agenda | 🕸 solução
• Prof. Neri
  • 📺 Exercício comentado: galeria-primario | 🕸 solução

🛠 Ferramentas

Para criar seu ambiente de trabalho, baixe as ferramentas e instale em seu computador.

• IDE: Visual Studio Code 📥
• Controle de versão: Git 📥

No decorrer do curso utilizaremos também:

• Kit de desenvolvimento: .NET SDK 📥

• Banco de dados: MySQL Community 📥

• 📺 📖 Passo-a-passo para a criação do ambiente (Dev C#)

• 📖 Criação de ambiente MySQL

Obs.: Os materiais podem citar versões anteriores das ferramentas, mas você deve utilizar as mais recentes disponíveis.

😲 Está difícil demais, o que eu faço?

Faça antes o Dev C# e aprenda a programar do zero.

---

Prof. Ermogenes Palacio, 2020-.

💪 Contributor 👨🏻‍🏫 @diegoneri