Organização e Padronização de Projetos Front-end

📁

INTRODUÇÃO

Por que padronizar um projeto?

Um projeto profissional não deve apenas funcionar. Ele precisa ser fácil de entender, manter, corrigir e evoluir.

Imagine entrar em um projeto criado por outra pessoa e encontrar dezenas de arquivos chamados teste.html, novo.js, final.css e coisa.js.

💡 Pense como um profissional:
Organização é uma forma de comunicação entre desenvolvedores.

SEU APRENDIZADO

Progresso da aula

1 Organização

2 Pastas

3 Arquivos

4 Nomenclatura

5 CSS

6 JavaScript

FUNDAMENTOS

O que é organização de projeto?

Entendendo por que a estrutura importa.

Organização de projeto é a definição de uma estrutura lógica para armazenar arquivos, pastas, imagens, estilos, scripts e documentos.

Quando todos os arquivos possuem um local e uma finalidade clara, o desenvolvimento se torna mais previsível.

📂 Localização Cada arquivo possui seu lugar.

🏷️ Nomenclatura Os nomes seguem regras.

🧩 Responsabilidade Cada recurso possui uma função.

Regra profissional:
Se você precisar explicar durante vários minutos onde determinado arquivo está, provavelmente a estrutura pode ser melhorada.

Terminou esta etapa? Marque como concluída para atualizar seu progresso.

ESTRUTURA

Organização de pastas

Separando arquivos por responsabilidade.

Uma das primeiras decisões de um projeto é definir onde cada tipo de recurso será armazenado.

Um projeto pequeno pode possuir poucas pastas. Um projeto maior pode possuir uma estrutura muito mais detalhada.

ESTRUTURA TREE

meu-projeto/
│
├── index.html
│
├── pages/
│   ├── sobre.html
│   ├── contato.html
│   └── produtos.html
│
├── css/
│   └── style.css
│
├── js/
│   └── script.js
│
├── img/
│   ├── logo.png
│   └── banner.jpg
│
└── docs/
    └── README.md

📄

pages/

Páginas HTML adicionais do sistema.

🎨

css/

Folhas de estilo e arquivos relacionados à apresentação.

⚙️

js/

Arquivos JavaScript responsáveis pela lógica e interações.

🖼️

img/

Imagens utilizadas pelo projeto.

Compreendeu a organização das pastas?

ARQUIVOS

Padronização de nomes de arquivos

Criando nomes previsíveis e profissionais.

O nome de um arquivo deve permitir que outra pessoa entenda sua finalidade sem precisar abrir o arquivo.

❌

Evite

NOMES RUIM

Página Inicial.html
Meu Arquivo.html
teste.html
teste2.html
FINAL.css
novo.js
coisa.js
imagem 01.jpg

✅

Prefira

NOMES BOM

index.html
pagina-inicial.html
pagina-contato.html
style.css
script.js
validacao-formulario.js
imagem-01.jpg

Padrão recomendado para este laboratório:
Utilize letras minúsculas e hífen para separar palavras em nomes de arquivos.

Agora você já consegue avaliar nomes de arquivos.

NOMENCLATURA

O que é nomenclatura?

Definindo regras para dar nomes ao código.

Nomenclatura é o conjunto de regras utilizadas para nomear elementos de um projeto.

Ela pode ser aplicada a:

📁

Pastas
pages, css, js, img

📄

Arquivos
index.html, contato.html

🎨

Classes CSS
card-produto, menu-principal

⚙️

JavaScript
calcularTotal(), usuarioLogado

Regra de ouro:

O nome deve explicar a finalidade do elemento.

Entendeu o conceito de nomenclatura?

CSS

Padronização de classes CSS

Criando nomes que representam componentes e funções.

Classes CSS devem representar o significado ou a responsabilidade do elemento, e não apenas sua aparência.

❌ Evite

CSS RUIM

.azul
.caixa1
.coisa
.div123
.bonito
.texto-grande

✅ Prefira

CSS BOM

.menu-principal
.card-produto
.formulario-contato
.botao-enviar
.titulo-principal
.descricao-produto

Exemplo prático

HTML HTML

<article class="card-produto">

  <h2 class="titulo-produto">
    Notebook
  </h2>

  <p class="descricao-produto">
    Computador portátil.
  </p>

  <button class="botao-comprar">
    Comprar
  </button>

</article>

Aprendeu a diferenciar aparência de responsabilidade?

CSS / ID

IDs e identificadores

Quando utilizar nomes claros para elementos únicos.

O atributo id identifica um elemento específico dentro da página.

O nome deve representar a função daquele elemento.

HTML HTML

<form id="formulario-contato">

  <input id="nome-usuario" type="text">

  <button id="botao-enviar" type="submit">
    Enviar
  </button>

</form>

Evite nomes genéricos como #x, #div1, #teste ou #coisa.

Etapa sobre IDs concluída?

JAVASCRIPT

Nomes de variáveis

Escrevendo variáveis que explicam seus valores.

Uma variável deve possuir um nome que permita entender o dado armazenado nela.

JAVASCRIPT JS

let nomeAluno = "João";

let idadeAluno = 18;

let quantidadeProdutos = 10;

let usuarioLogado = true;

let valorTotalCompra = 250.50;

❌ Pouco claro

JS EVITE

let x = 10;
let a = true;
let b = "João";

✅ Claro

JS PREFIRA

let quantidade = 10;
let usuarioLogado = true;
let nomeAluno = "João";

Entendeu a importância de nomes descritivos?

JAVASCRIPT

Camel Case

Um padrão muito utilizado em JavaScript.

No padrão camelCase, a primeira palavra começa com letra minúscula e as palavras seguintes começam com letra maiúscula.

EXEMPLOS camelCase

nomeAluno
dataNascimento
quantidadeProdutos
usuarioLogado
valorTotal

calcularTotal()
validarFormulario()
cadastrarAluno()
buscarProduto()
atualizarUsuario()

Atenção: camelCase é uma convenção de nomenclatura. Ela não altera o funcionamento do JavaScript, mas melhora muito a consistência do código.

Pronto para utilizar camelCase?

CSS / HTML

Kebab Case

Padronizando arquivos e classes.

O padrão kebab-case utiliza letras minúsculas e hífen para separar palavras.

EXEMPLOS kebab-case

pagina-inicial.html
pagina-contato.html
lista-produtos.html

.menu-principal
.card-produto
.botao-enviar
.titulo-principal
.descricao-produto

Arquivo pagina-contato.html

Classe .card-produto

JavaScript calcularTotal()

Entendeu a diferença entre os padrões?

JAVASCRIPT

Nomes de funções

Funções representam ações.

Funções normalmente representam uma ação. Por isso, seus nomes devem indicar claramente o que elas executam.

FUNÇÕES JS

function cadastrarAluno() {

}

function calcularTotal() {

}

function validarFormulario() {

}

function buscarProduto() {

}

function atualizarUsuario() {

}

Dica: Prefira nomes que respondam à pergunta: "O que essa função faz?"

Aprendeu a nomear funções?

JAVASCRIPT

Constantes e variáveis

Escolhendo nomes e declarações de forma consistente.

Além de escolher bons nomes, precisamos utilizar corretamente as declarações do JavaScript.

EXEMPLO JS

const nomeSistema = "Sistema Escolar";

const quantidadeMaxima = 50;

let quantidadeAtual = 20;

let usuarioLogado = true;

O mais importante nesta aula é manter consistência: nomes claros e padrões previsíveis.

Etapa concluída?

HTML

Organização do HTML

Estruturando o documento de maneira previsível.

O HTML também deve seguir uma estrutura organizada. Utilize indentação, elementos semânticos e agrupamento lógico.

HTML HTML5

<main>

  <section class="produtos">

    <h2>
      Produtos
    </h2>

    <article class="card-produto">

      <h3>
        Notebook
      </h3>

      <p>
        Computador portátil.
      </p>

    </article>

  </section>

</main>

Organização visual também é importante.
Um código corretamente indentado permite identificar rapidamente a hierarquia dos elementos.

Entendeu a importância da indentação?

CSS

Organização do CSS

Mantendo estilos previsíveis e fáceis de localizar.

Um arquivo CSS pode crescer rapidamente. Por isso, é importante organizar as regras por responsabilidade.

CSS CSS

/* ================================
   MENU
================================ */

.menu-principal {
  display: flex;
}


/* ================================
   CARD
================================ */

.card-produto {
  padding: 20px;
}


/* ================================
   BOTÃO
================================ */

.botao-enviar {
  padding: 12px 20px;
}

Pronto para organizar seu CSS?

BOAS PRÁTICAS

Consistência é mais importante que improvisação

Escolha um padrão e mantenha-o durante o projeto.

Um dos problemas mais comuns em projetos é misturar vários padrões.

INCONSISTENTE EVITE

card-produto
cardProduto
CardProduto
card_produto
CARDPRODUTO
produtoCard

PADRONIZADO PREFIRA

.card-produto
.card-usuario
.card-pedido
.card-categoria
.card-produto-destaque

Padrão escolhido:

Para este laboratório, adotaremos kebab-case para classes CSS e nomes de arquivos e camelCase para variáveis e funções JavaScript.

Entendeu a importância da consistência?

PADRÃO COMPLETO

Estrutura recomendada

Um modelo que podemos utilizar nos projetos.

Agora podemos juntar os conceitos estudados em uma estrutura completa.

PROJETO TREE

projeto-integrador/
│
├── index.html
│
├── pages/
│   ├── sobre.html
│   ├── contato.html
│   └── servicos.html
│
├── css/
│   └── style.css
│
├── js/
│   └── script.js
│
├── img/
│   ├── logo.png
│   ├── banner.jpg
│   └── produto-01.jpg
│
├── assets/
│   ├── icons/
│   └── fonts/
│
└── docs/
    └── README.md

Esta estrutura pode ser utilizada como referência para seus projetos.

DESAFIO

Organize um projeto desorganizado

Imagine que você recebeu o seguinte projeto. Seu desafio é identificar os problemas e propor uma estrutura profissional.

PROJETO ORIGINAL PROBLEMA

site/
├── index.html
├── teste.html
├── final.html
├── FINAL.css
├── novo.css
├── script.js
├── script2.js
├── coisa.js
├── imagem 1.jpg
├── imagem final.jpg
├── x.png
└── pagina2.html

🔎 Identifique

Nomes inadequados.
Arquivos duplicados.
Falta de pastas.
Falta de padrão.

🛠️ Corrija

Crie uma estrutura.
Renomeie os arquivos.
Separe responsabilidades.
Defina um padrão.

Finalizou o desafio?

AVALIAÇÃO

Exercícios de fixação

Verifique se os conceitos foram compreendidos.

Questão 1

Qual nome é mais adequado para uma página de contato?

A) Pagina Final.html
B) contato.html
C) coisa.html
D) pagina2.html

Questão 2

Qual nome representa melhor uma classe CSS?

A) .azul
B) .div1
C) .card-produto
D) .coisa

Questão 3

Qual variável possui melhor nomenclatura?

A) let x = 10;
B) let a = 10;
C) let quantidadeProdutos = 10;
D) let coisa = 10;

Questão 4

Qual nome representa melhor uma função?

A) fazer()
B) coisa()
C) executar()
D) calcularTotal()

Questão 5

Qual padrão é utilizado nos exemplos de variáveis JavaScript?

A) kebab-case
B) camelCase
C) snake_case
D) UPPER-CASE

Terminou os exercícios?

PROJETO PRÁTICO

Padronizando o Projeto Integrador

Agora aplique todos os conceitos estudados no Projeto Integrador do seu grupo.

ETAPA 01 Analisar Verifique a estrutura atual.

ETAPA 02 Organizar Crie pastas por responsabilidade.

ETAPA 03 Renomear Corrija nomes inadequados.

ETAPA 04 Padronizar Escolha as convenções.

ETAPA 05 Documentar Registre as decisões.

ETAPA 06 Validar Faça o checklist final.

🎯 Objetivo: Entregar um projeto que qualquer integrante da equipe consiga compreender e continuar desenvolvendo.

REVISÃO

Resumo da aula

📁 Organize as pastas.

📄 Nomeie os arquivos.

🎨 Padronize o CSS.

⚙️ Padronize o JavaScript.

🏷️ Utilize nomes claros.

🐪 Use camelCase no JS.

➖ Use kebab-case em arquivos/classes.

📚 Documente o projeto.

Regra principal:
Código organizado não é apenas código que funciona. É código que outra pessoa consegue entender, manter e continuar desenvolvendo.

🏆

Aula concluída!

Você estudou organização, estrutura, nomenclatura e padronização de projetos Front-end.

Agora aplique esses padrões no seu próprio projeto.

Organização e Padronização de Projetos Web

Por que padronizar um projeto?

Progresso da aula

O que é organização de projeto?

Organização de pastas

pages/

css/

js/

img/

Padronização de nomes de arquivos

Evite

Prefira

O que é nomenclatura?

Padronização de classes CSS

❌ Evite

✅ Prefira

Exemplo prático

IDs e identificadores

Nomes de variáveis

❌ Pouco claro

✅ Claro

Camel Case

Kebab Case

Nomes de funções

Constantes e variáveis

Organização do HTML

Organização do CSS

Consistência é mais importante que improvisação

Estrutura recomendada

Checklist de padronização

Organize um projeto desorganizado

Exercícios de fixação

Questão 1

Questão 2

Questão 3

Questão 4

Questão 5

Padronizando o Projeto Integrador

Resumo da aula

Aula concluída!