Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Imersão Dev 10] Descubra como começar sua Jornada no Desenvolvimento Web - Resumo Estruturado Aula 02

por Ricardo Costa Val Do Rosario
| 263.9k xp | 481 posts
MÉDICO DA TECNOVIGILÂNCIA (SERVIÇO EM CONSTRUÇÃO)

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Crie a Base de conhecimento do seu site

Por Ricardo Costa Val do Rosario auxiliado por ChatGPT 5,0 Plus

Tema central:

  • Criar a base de conhecimento do site usando HTML semântico, JSON, JavaScript, programação assíncrona
    e integração com o Gemini Code Assist.

1. Objetivo da Aula

- A aula ensina a transformar uma página estática em uma página dinâmica, capaz de ler dados de um arquivo 
externo (JSON) e exibi-los na interface através de JavaScript, utilizando:

1. Estruturas semânticas do HTML
2. Criação de cards para conteúdo
3. Criação e manipulação de arquivo data.json
4. Uso de fetch(), async/await
5. Integração com Gemini Code Assist para gerar dados rapidamente

2. Construção da Estrutura HTML

- Criação dos Cards
1. Cada item da base (linguagem, filme, etc.) será representado por um card.
2. Cards são criados usando o elemento , que é mais semântico que uma <div>.

- HTML Semântico
- Por que é importante?
1. Melhora o SEO
2. Ajuda leitores de tela (acessibilidade)
3. Organiza melhor o conteúdo
4. Facilita motores de busca a entenderem o conteúdo

- Exemplo na aula:
<article>
<h2>
<p>
<a>

Criação da Base de Conhecimento com JSON

- Por que JSON?

1. Um formato padrão de troca de dados entre sistemas
2. Leve, textual e fácil de transportar
3. Base das APIs modernas
4. A forma como backend envia dados ao frontend

# Estrutura criada na aula
- Um JSON com vários objetos contendo:
1. nome
2. descrição
3. ano
4. link

[
  {
    "nome": "JavaScript",
    "descricao": "Linguagem da web",
    "ano": 1995,
    "link": "https://developer.mozilla.org/pt-BR/docs/Web/JavaScript"
  }
]

Integração com o JavaScript

- Para conectar HTML ➜ JSON ➜ Interface, criamos:

# Arquivo script.js
1. Inicializa variável dados = []
2. Cria função iniciarBusca()
3. Utiliza fetch() para acessar o arquivo JSON
4. Usa async/await para esperar a resposta

Programação assíncrona

1. async indica que a função lida com processos não imediatos.

2. await força o JavaScript a “esperar” a resposta antes de continuar.
Isso evita travamentos e mantém a página fluida.

Aparecimento dos Dados no Console

- Ao clicar no botão Buscar, o fetch (trazer):
1. Busca o arquivo JSON
2. Gera a resposta
3. Converte para dados utilizáveis
4. Exibe no console (antes de exibir na tela)
5. Foi demonstrado como interpretar respostas de rede, status 200, conteúdo, etc.

Complementação com Gemini Code Assist

- A aula mostra como o Gemini:

1.  Entende o padrão dos objetos JSON
2.  Gera novas entradas automaticamente
3.  Aumenta a base de conhecimento rapidamente

# Exemplos criados automaticamente:
•	Java
•	C#
•	C++
•	PHP
•	Ruby
•	Go
•	TypeScript

Próximos Passos da Aula

- A aula termina preparando o terreno para a Aula 03:

1. Os dados já foram carregados dinamicamente.
2. O próximo desafio será exibir os cards dinamicamente na página, 
substituindo o HTML manual.
2 respostas
por Ricardo Costa Val Do Rosario
| 263.9k xp | 481 posts
MÉDICO DA TECNOVIGILÂNCIA (SERVIÇO EM CONSTRUÇÃO)

Reforço das Tecnologias Citadas na Aula (Contextualizado)

CSS

- Não foi o foco da aula, mas é lembrado como:
1. A camada de estilo da página
2. Onde personalizamos aparência, cores, espaçamento, layout
3. Separado do HTML para manter organização e boas práticas

- Na aula, o CSS já estava conectado ao HTML.

JSON (JavaScript Object Notation)

 
- Finalidade:
1. Transportar dados entre sistemas
2. Formato universal e leve
3. A base para APIs e web moderna
4. Utilizado para montar a Base de Conhecimento
5. É a “língua franca” entre o frontend e backend.

JavaScript (JS)

- Função no contexto da aula:
    
1. Fazer o site ler dados externos
2. Tornar a página dinâmica
3. Fazer requisições com fetch()
4. Manipular DOM posteriormente
5. Criar funções assíncronas (async/await)
6. É a linguagem que faz o site funcionar de verdade.

Python


- Aparece como exemplo dentro da base de conhecimento gerada.

- Contextualização útil ao aluno:
1. Linguagem focada em IA, ciência de dados, automação e back-end
2. Muito usada para criar APIs que entregam JSON para o frontend
3. Pode ser o “time de backend” mencionado na aula
4. Frequentemente produz os dados consumidos via JSON

Java

- Aparece também como item da base de conhecimento. Na prática, seria:

1. Uma linguagem forte em back-end corporativo
2. Usada para criar APIs REST
3. Envia dados em JSON para aplicações web

Mensagem Central da Aula

1. A internet moderna funciona através de troca estruturada de dados (geralmente JSON)
entre aplicações utilizando JavaScript no frontend para renderizar dinamismo.

2. A aula mostra como dar o primeiro passo real para construir sistemas profissionais.

RESUMINDO

1. Objetivo da Aula
- Transformar uma página estática em dinâmica usando HTML semântico, JSON, 
JavaScript assíncrono e integração com Gemini Code Assist.

2. Construção da Estrutura HTML
- Criar cards com <article>, usar HTML semântico para SEO e acessibilidade.

3. Criação da Base de Conhecimento com JSON
- JSON como formato de troca de dados; criação do arquivo data.json com nome, 
    descrição, ano e link.

4. Integração com JavaScript
- Uso de fetch(), async/await, criação da função iniciarBusca e exibição dos dados.

5. Console e Depuração
- Dados carregados via fetch são exibidos no console para validação.

6. Complementação com Gemini Code Assist
- Gerar automaticamente novas entradas no JSON seguindo o padrão criado.

7. Tecnologias Citadas
- CSS para estilo; JSON para troca de dados; JS para dinamismo; Python e Java como 
    exemplos de backend.
solução!
por Lorena Garcia
| 12399.3k xp | 18596 posts
Alura Scuba Team

Oi, Ricardo! Como vai?

Agradeço por compartilhar.

Gostei da forma como você organizou o resumo, importante como destacou a ligação entre HTML semântico, JSON e JavaScript assíncrono. Sua leitura da proposta da aula ficou clara e bem estruturada. Continue registrando seus aprendizados desse jeito, ajuda muito na fixação.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!