Recursos · DIW

Cheat Sheets

Referências rápidas para as principais tecnologias da disciplina.

Estrutura Básica

html

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width,
    initial-scale=1.0">
  <title>Título da Página</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Conteúdo aqui -->
  <script src="app.js"></script>
</body>
</html>

Tags Semânticas

<header>cabeçalho da página

<nav>navegação

<main>conteúdo principal

<section>seção temática

<article>conteúdo independente

<aside>conteúdo lateral

<footer>rodapé

Formulário Completo

html

<form id="meu-form">
  <input type="text" id="nome"
    placeholder="Nome" required>

  <input type="email" id="email"
    placeholder="E-mail" required>

  <select id="categoria">
    <option value="">Selecione...</option>
    <option value="a">Opção A</option>
  </select>

  <textarea id="obs"
    rows="3" placeholder="Observações">
  </textarea>

  <button type="submit">Salvar</button>
  <button type="reset">Limpar</button>
</form>

Tabela de Dados

html

<table>
  <thead>
    <tr>
      <th>Nome</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody id="corpo-tabela">
    <!-- Linhas inseridas via JS -->
  </tbody>
</table>

Flexbox

css

.container {
  display: flex;

  /* Eixo principal (horizontal) */
  flex-direction: row | column;
  justify-content: flex-start
    | flex-end | center
    | space-between | space-around;

  /* Eixo cruzado (vertical) */
  align-items: stretch
    | flex-start | flex-end | center;

  flex-wrap: wrap | nowrap;
  gap: 1rem;
}

.item {
  flex: 1;          /* cresce igual */
  flex: 0 0 200px;  /* tamanho fixo */
}

CSS Grid

css

.grid {
  display: grid;

  /* 3 colunas iguais */
  grid-template-columns: repeat(3, 1fr);

  /* Tamanhos mistos */
  grid-template-columns: 200px 1fr 2fr;

  /* Responsivo automático */
  grid-template-columns:
    repeat(auto-fit, minmax(250px, 1fr));

  gap: 1rem;
  row-gap: 1.5rem;
  column-gap: 1rem;
}

/* Elemento ocupa 2 colunas */
.destaque { grid-column: span 2; }

Media Queries (Mobile First)

css

/* Mobile: 1 coluna (padrão) */
.grid { grid-template-columns: 1fr; }

/* Tablet: 2 colunas */
@media (min-width: 768px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

/* Desktop: 3 colunas */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Tailwind CSS Essencial

flex items-center gap-4linha com gap

grid grid-cols-3 gap-4grid 3 cols

p-4 / px-4 py-2padding

text-sm / text-lgtamanho do texto

font-bold / font-mediumpeso do texto

rounded-xl / rounded-fullborda arredondada

shadow-sm / shadow-lgsombra

hidden / block / flexdisplay

md:grid-cols-2responsivo (md+)

hover:bg-blue-700efeito hover

transition-colorsanimação

Variáveis e Tipos

javascript

let nome   = 'Ana';         // string
let idade  = 25;             // number
let ativo  = true;           // boolean
let dados  = null;           // null
let obj    = { a: 1 };       // object
let lista  = [1, 2, 3];      // array

const PI   = 3.14159;        // imutável

// Destructuring
const { nome, email } = usuario;
const [primeiro, ...resto] = lista;

// Template string
const msg = `Olá, ${nome}! Você tem ${idade} anos.`;

Funções

javascript

// Tradicional
function somar(a, b) { return a + b; }

// Arrow function
const somar = (a, b) => a + b;

// Parâmetro padrão
function greet(nome = 'visitante') {
  return `Olá, ${nome}!`;
}

// Spread operator
function soma(...nums) {
  return nums.reduce((acc, n) => acc + n, 0);
}

// Async/await
async function buscar(url) {
  const res = await fetch(url);
  return res.json();
}

Arrays (métodos principais)

javascript

const nums = [1, 2, 3, 4, 5];

// map: transforma cada elemento
nums.map(n => n * 2);        // [2,4,6,8,10]

// filter: filtra por condição
nums.filter(n => n > 2);     // [3,4,5]

// find: acha o primeiro que bate
nums.find(n => n > 3);       // 4

// findIndex: índice do primeiro
nums.findIndex(n => n === 3); // 2

// reduce: acumula um valor
nums.reduce((acc, n) => acc + n, 0); // 15

// includes: verifica existência
nums.includes(3);            // true

// some / every
nums.some(n => n > 4);       // true
nums.every(n => n > 0);      // true

// sort (cuidado: altera o array!)
[3,1,2].sort((a,b) => a - b); // [1,2,3]

DOM – Principais Métodos

javascript

// Selecionar elementos
document.getElementById('id')
document.querySelector('.classe')   // primeiro
document.querySelectorAll('li')     // todos

// Ler / escrever conteúdo
el.textContent = 'novo texto';
el.innerHTML   = '<strong>html</strong>';
el.value       // valor de inputs

// Atributos
el.getAttribute('src')
el.setAttribute('class', 'ativo')
el.dataset.id  // data-id="..."

// Classes CSS
el.classList.add('ativo')
el.classList.remove('ativo')
el.classList.toggle('ativo')

// Criar e inserir elemento
const div = document.createElement('div');
div.textContent = 'Novo elemento';
container.appendChild(div);
container.innerHTML = ''; // Limpa tudo

// Eventos
el.addEventListener('click', handler)
el.removeEventListener('click', handler)

GET (Listar / Buscar)

javascript

// GET simples
const dados = await fetch('/api/itens')
  .then(r => r.json());

// GET com filtro
const url = new URL('/api/itens', location.origin);
url.searchParams.set('categoria', 'A');
const filtrados = await fetch(url).then(r => r.json());

// GET por ID
const item = await fetch(`/api/itens/${id}`)
  .then(r => {
    if (!r.ok) throw new Error('Não encontrado');
    return r.json();
  });

POST (Criar)

javascript

const novoItem = { nome: 'Teste', valor: 42 };

const criado = await fetch('/api/itens', {
  method:  'POST',
  headers: { 'Content-Type': 'application/json' },
  body:    JSON.stringify(novoItem)
}).then(r => r.json());

console.log('ID gerado:', criado.id);

PUT / PATCH (Editar)

javascript

// PUT - substitui completamente
await fetch(`/api/itens/${id}`, {
  method:  'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ nome: 'Novo', valor: 99 })
});

// PATCH - atualiza só os campos enviados
await fetch(`/api/itens/${id}`, {
  method:  'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ valor: 99 }) // só o valor
});

DELETE e Tratamento de Erros

javascript

// DELETE
const ok = await fetch(`/api/itens/${id}`, {
  method: 'DELETE'
}).then(r => r.ok);

// Tratamento robusto de erros
async function chamarAPI(url, opts = {}) {
  try {
    const resposta = await fetch(url, opts);

    if (!resposta.ok) {
      const erro = await resposta.text();
      throw new Error(`${resposta.status}: ${erro}`);
    }

    return resposta.json();

  } catch (e) {
    if (e instanceof TypeError) {
      // Sem conexão com o servidor
      console.error('Servidor indisponível');
    } else {
      console.error('Erro na API:', e.message);
    }
    throw e; // Re-lança para o chamador tratar
  }
}

Endpoints Padrão

Método	URL	Ação
GET	/api/itens	Listar todos
GET	/api/itens/:id	Buscar por ID
POST	/api/itens	Criar
PUT	/api/itens/:id	Substituir
PATCH	/api/itens/:id	Atualizar
DELETE	/api/itens/:id	Excluir

Parâmetros de Query

/api/contatos?categoria=amigos

Filtra por campo exato

/api/contatos?q=silva

Busca full-text em todos os campos

/api/contatos?_page=1&_limit=5

Paginação (página 1, 5 por página)

/api/contatos?_sort=nome&_order=asc

Ordenar por campo

/api/contatos?cidade=BH&categoria=amigos

Múltiplos filtros combinados

Estrutura do db.json

json

{
  "usuarios": [
    { "id": "uuid-1", "login": "admin", "senha": "123", "nome": "Admin", "email": "admin@site.com" }
  ],
  "produtos": [
    { "id": 1, "nome": "Produto A", "preco": 29.90, "categoria": "eletronicos", "estoque": 100 },
    { "id": 2, "nome": "Produto B", "preco": 15.50, "categoria": "papelaria",   "estoque": 50  }
  ],
  "categorias": [
    { "id": 1, "descricao": "Eletrônicos" },
    { "id": 2, "descricao": "Papelaria"  }
  ],
  "pedidos": []
}

Ferramentas Recomendadas

Programas e serviços que facilitam o desenvolvimento web.

💙

VS Code

code.visualstudio.com

Editor de código gratuito. Instale as extensões: Live Server, Prettier e ESLint.

😴

Insomnia

insomnia.rest

Cliente REST para testar APIs com interface visual. Alternativa gratuita ao Postman.

📮

Postman

postman.com

Ferramenta completa para testar, documentar e colaborar em APIs REST.

🟢

Node.js

nodejs.org

Plataforma JavaScript no servidor. Necessária para executar o JSON Server.

📦

JSON Server

github.com/typicode/json-server

Documentação oficial do JSON Server. Versão 0.17.x usada neste projeto.

🌊

Tailwind CSS

tailwindcss.com

Framework CSS utilitário. Documentação completa de todas as classes disponíveis.

📊

Chart.js

chartjs.org

Biblioteca de gráficos. Fácil de usar e com diversos tipos: linha, barra, pizza, etc.

🗺️

Mapbox GL JS

docs.mapbox.com

API de mapas interativos. Crie conta gratuita com e-mail @sga.pucminas.br.

📖

MDN Web Docs

developer.mozilla.org/pt-BR

Referência completa em português para HTML, CSS e JavaScript. Use sempre!

Vídeos Complementares

Material de apoio produzido para acompanhar a disciplina.

▶

Sequência 1

Projeto com JavaScript, JSON e Local Storage

Construção de aplicação completa usando Local Storage como banco de dados antes de integrar com JSON Server.

▶ Banco de Dados com JSON e Local Storage ↓ Código Fonte

▶

Sequência 2

Projeto Completo com JavaScript, JSON e AJAX

Série de 3 partes: criação do projeto, manipulação de dados e comunicação com servidor via AJAX.

Parte 1/3

Iniciando com HTML e CSS

Parte 2/3

Manipulando dados com JS e JSON

Parte 3/3

Obtendo dados via AJAX

↓ Código Fonte Completo

Referências Bibliográficas

Obras de referência adotadas na disciplina. Disponíveis na biblioteca da PUC Minas.

📗

JavaScript: O Guia Definitivo

FLANAGAN, David. JavaScript: o guia definitivo. 6. ed. Porto Alegre, RS: Bookman, 2014. 1062 p. ISBN 9788565837484.

E-book disponível na Biblioteca PUC Minas

📘

Desenvolvimento de Software II

MILETTO, Evandro Manara. Desenvolvimento de software II: introdução ao desenvolvimento web com HTML, CSS, JavaScript e PHP. Porto Alegre: Bookman, 2014. ISBN 9788582601969.

E-book disponível na Biblioteca PUC Minas

📙

CSS3: Desenvolva Aplicações Web Profissionais

SILVA, Maurício Samy. CSS3: desenvolva aplicações web profissionais com uso dos poderosos recursos de estilização das CSS3. São Paulo: Novatec, 2012. 494 p. ISBN 9788575222898.

2 exemplares disponíveis na Biblioteca PUC Minas

🔗 Recursos e Referências

Cheat Sheets

Estrutura Básica

Tags Semânticas

Formulário Completo

Tabela de Dados

Flexbox

CSS Grid

Media Queries (Mobile First)

Tailwind CSS Essencial

Variáveis e Tipos

Funções

Arrays (métodos principais)

DOM – Principais Métodos

GET (Listar / Buscar)

POST (Criar)

PUT / PATCH (Editar)

DELETE e Tratamento de Erros

Endpoints Padrão

Parâmetros de Query

Estrutura do db.json

Ferramentas Recomendadas

Vídeos Complementares

Projeto com JavaScript, JSON e Local Storage

Projeto Completo com JavaScript, JSON e AJAX

Referências Bibliográficas