Material organizado para estudo progressivo, com leitura confortável, recursos complementares e navegação para a próxima etapa da disciplina.
Resumo
Aula 2: A aula trabalhou a parte visual inicial do projeto com HTML5, CSS3 e JavaScript, mostrando como começar a montar a interface do GameStock. Foram abordados elementos de layout, organização dos arquivos de CSS e JS, uso de imagens da interface e preparação visual para telas como loja, painel, formulários e listagens.
Linguagens de Programação16/04/2026Aula interativa importada
Leitura pensada para estudo, consulta e revisão. Use a navegação lateral para alternar entre etapas da aula.
Estudo
Conteúdo interativo — HTML importado
Aula 2 - Interface com HTML5, CSS3 e JS
Abra o material em tela cheia para estudar com conforto, sem sair da disciplina.
Aula 2 - Interface com HTML5, CSS3 e JS
100%
Carregando conteúdo interativo...
Aula 2 — Interface do GameStock 2026 V2 ◀ ▶ 1 / 0 Tela cheia A2 GameStock 2026 V2 · Aula 2 Interface com HTML5, CSS3 e JS Nesta aula vamos montar a base visual do projeto: vitrine da loja, telas administrativas, pasta de assets, upload de imagens e primeiros comportamentos com JavaScript. Interface base HTML semântico CSS responsivo JS puro Assets /public GameStock LojaLogin CAPA Pixel Quest Aventura R$ 59,90 CAPA Cyber Kart Corrida R$ 89,90 CAPA Dungeon RPG R$ 74,90 01 01·Objetivo da Aula O que vamos entregar? Loja Um layout de vitrine com cabeçalho, busca visual e cards de games. Admin Base visual para login, listagem, cadastro e edição. Assets CSS, JS, imagens da interface e uploads separados corretamente. JS Interações simples: menu, preview de imagem e mensagens. A2 Ideia da aulaAntes de conectar com PHP e MySQL, vamos deixar o esqueleto visual pronto. Depois, cada tela está preparada para receber dados reais. 02 02·Mapa de Telas Quais telas a V2 precisa? LojaLoginAdmin i Tela authA tela de login terá formulário simples. A validação real entra na aula de autenticação. games/index Tabela com ações de editar e excluir. games/create Formulário com upload da capa do game. users/index CRUD visual de usuários do painel. 03 03·Estrutura de Arquivos Onde fica a interface? pastas usadas na aula 2 TREECopiar GameStock2026V2/ app/ views/ auth/ login.php games/ index.php create.php edit.php users/ index.php public/ assets/ css/ style.css js/ app.js img/ logo.svg placeholder-game.jpg uploads/ games/ index.php CSS assets/cssGuarda a identidade visual do projeto: cores, grid, botões, cards e formulários. JS assets/jsGuarda interações de front-end, sem misturar comportamento com HTML. IMG img e uploadsassets/img é interface. uploads/games é arquivo enviado pelo usuário. 04 04·HTML Semântico A página pública em HTML5 public/index.php HTMLCopiar <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GameStock 2026 V2</title> <link rel="stylesheet" href="assets/css/style.css"> </head> <body> <header class="topbar"> <a class="brand" href="index.php">GameStock</a> <nav class="menu"> <a href="#games">Games</a> <a href="/login">Login</a> </nav> </header> <main> <section class="hero">...</section> <section id="games" class="games-grid">...</section> </main> <script src="assets/js/app.js"></script> </body> </html> 1 Header Contém marca, menu e acesso ao login. 2 Main Guarda o conteúdo principal da página. 3 Sections Separam blocos como hero, busca e lista de games. 4 Assets CSS e JS ficam no public/assets. 05 05·CSS Base Identidade visual em CSS3 public/assets/css/style.css CSSCopiar :root { --bg: #f6f8fb; --card: #ffffff; --ink: #101828; --muted: #667085; --brand: #2563eb; --ok: #059669; --line: #dce3ee; --radius: 8px; } * { box-sizing: border-box; } body { margin: 0; font-family: Arial, sans-serif; background: var(--bg); color: var(--ink); } .container { width: min(1120px, calc(100% - 32px)); margin: 0 auto; } CSS VariáveisCentralizam cores, radius e espaçamentos. Quando a identidade mudar, alteramos poucos pontos. UI ComponentesCards, botões, grid e formulários devem reaproveitar classes. ! Regra da aulaEvite CSS espalhado em cada tag. A interface fica mais fácil de manter quando o estilo está no arquivo externo. 06 06·Vitrine Componente de card do game card da loja HTMLCopiar <article class="game-card"> <img src="uploads/games/pixel-quest.jpg" alt="Capa do game Pixel Quest" class="game-cover" > <div class="game-info"> <span class="game-category">Aventura</span> <h3>Pixel Quest</h3> <p>Aventura 2D com fases e chefes.</p> <strong class="price">R$ 59,90</strong> </div> </article> preview do componente UPLOAD Pixel Quest Aventura · Estoque 12 R$ 59,90 UPLOAD Cyber Kart Corrida · Estoque 8 R$ 89,90 UPLOAD Dungeon Stack RPG · Estoque 5 R$ 74,90 07 07·Formulários Cadastro visual de games games/create.php Título Pixel Quest Categoria Aventura Descrição Aventura 2D com fases e chefes. Preço 59.90 Estoque 12 Salvar game form com upload HTMLCopiar <form action="/games/store" method="post" enctype="multipart/form-data" class="form-card" > <label>Título</label> <input type="text" name="titulo" required> <label>Imagem do game</label> <input type="file" name="imagem" accept="image/*"> <button type="submit">Salvar game</button> </form> ! Detalhe importantePara upload funcionar no PHP, o formulário precisa usar method="post" e enctype="multipart/form-data". 08 08·JavaScript Primeiras interações com JS public/assets/js/app.js JSCopiar // Preview da imagem antes do envio const inputImagem = document.querySelector('#imagem'); const preview = document.querySelector('#preview'); if (inputImagem && preview) { inputImagem.addEventListener('change', () => { const arquivo = inputImagem.files[0]; if (!arquivo) return; preview.src = URL.createObjectURL(arquivo); preview.classList.add('show'); }); } // Mensagens temporarias setTimeout(() => { document.querySelectorAll('.alert').forEach(alerta => { alerta.remove(); }); }, 3000); Preview Ajuda o usuário a conferir a capa antes de cadastrar o game. Mensagem Alertas de sucesso ou erro podem sumir sozinhos depois de alguns segundos. Validação O JavaScript melhora a experiência, mas o PHP ainda precisa validar no servidor. 09 09·Responsividade A loja no desktop e no celular media query CSSCopiar .games-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 768px) { .topbar { flex-direction: column; align-items: flex-start; } .games-grid { grid-template-columns: 1fr; } } i Regra práticaComece com uma estrutura simples, teste no celular e ajuste grid, menu e formulários antes de conectar ao banco. 10 10·Padrões Visuais Como deixar a interface consistente Nomes de classes Use nomes claros: game-card, topbar, form-card. Estados Prepare classes como .alert-success, .error, .is-active. Reuso O mesmo botão e o mesmo card devem funcionar em várias telas. ! EviteCopiar CSS diferente para cada página. Isso deixa a manutenção lenta quando o projeto crescer. OK PrefiraCriar pequenos componentes visuais reaproveitáveis: card, tabela, botão, alerta, campo e container. 11 11·Exercícios Prática da Aula 2 01 Crie o arquivo public/assets/css/style.css e defina as variáveis principais de cor.FACIL▼ Use :root com --bg, --brand, --ink e --line.Ver dica 02 Monte um card de game com imagem, categoria, título, descrição e preço.MEDIO▼ Use <article> para o card e <img> com atributo alt.Ver dica 03 Crie um formulário de cadastro de game com upload da imagem.MEDIO▼ Lembre de usar enctype="multipart/form-data" no formulário.Ver dica 04 Implemente preview da imagem selecionada usando JavaScript.DESAFIO▼ Use URL.createObjectURL(arquivo) e atribua o resultado ao src de uma imagem.Ver dica 12 FIM·Resumo Resumo da Aula 2 01A interface do GameStock fica separada entre views, assets e uploads. 02HTML semântico ajuda a organizar loja, login e painel administrativo. 03CSS externo cria uma identidade visual reaproveitável. 04O cadastro de games precisa prever upload de imagem com multipart/form-data. 05JavaScript entra para melhorar a experiência, não para substituir validação no PHP. Próxima aula Aula 3 — PHP 8, MVC e rotas simples