☕ Um Café no Bellacosa Mainframe
Gostou do conteúdo? Ajude a manter o café quente, o COBOL compilando e o mainframe acordado. 😄
☕ Pague um café ao Bellacosa

Translate

Mostrar mensagens com a etiqueta Desenvolvimento Web. Mostrar todas as mensagens
Mostrar mensagens com a etiqueta Desenvolvimento Web. Mostrar todas as mensagens

quinta-feira, 29 de maio de 2025

Vibe Coding sem Mistérios: da Ideia Nebulosa ao Aplicativo em Produção

 

Bellacosa Mainframe e a vibe coding sem misterios

☕ Um Café no Bellacosa Mainframe

Vibe Coding sem Mistérios: da Ideia Nebulosa ao Aplicativo em Produção

O guia do Programador COBOL Padawan para comandar inteligências artificiais, construir software com disciplina e não transformar a nave em sucata espacial

Imagine a seguinte cena.

Você está sentado diante do terminal, com uma caneca de café ao lado, o cursor piscando na tela e uma ideia aparentemente genial atravessando sua mente:

“Vou pedir para a inteligência artificial criar um aplicativo completo.”

Você respira fundo, digita:

“Faça um aplicativo de controle financeiro.”

A IA responde com entusiasmo. Em poucos segundos aparecem telas modernas, botões elegantes, gráficos coloridos e uma estrutura de código que parece saída diretamente dos laboratórios de engenharia da Frota Estelar.

Você executa o projeto.

A tela inicial abre.

O botão “Salvar” não funciona.

O saldo aceita letras.

A senha aparece no código-fonte.

A aplicação perde todos os dados quando a página é atualizada.

O relatório mensal calcula fevereiro com 31 dias.

E, em algum lugar da galáxia, um velho programador COBOL fecha os olhos, segura a caneca de café e murmura:

“Foi por isso que inventamos análise de sistemas.”

Bem-vindo ao universo do Vibe Coding.

Não, Vibe Coding não é pedir “faça um aplicativo” e torcer para que tudo funcione. Também não é uma forma mágica de eliminar análise, testes, segurança, arquitetura ou responsabilidade.

Vibe Coding é uma nova maneira de construir software utilizando inteligência artificial como copiloto, desenvolvedor assistente, gerador de protótipos, revisor e acelerador de tarefas.

A palavra importante aqui é assistente.

A IA pode gerar o código. Pode desenhar a interface. Pode sugerir um banco de dados. Pode escrever testes. Pode até explicar por que determinada abordagem foi utilizada.

Mas alguém ainda precisa comandar a missão.

E esse alguém é você.


O que é Vibe Coding, afinal?

Vibe Coding é o desenvolvimento de software orientado por linguagem natural, contexto, exemplos visuais e ciclos rápidos de interação com inteligência artificial.

Em vez de escrever manualmente todas as linhas de código, o desenvolvedor descreve o que deseja construir.

A IA então transforma essa descrição em:

  • componentes de interface;

  • regras de negócio;

  • APIs;

  • tabelas;

  • arquivos de configuração;

  • testes;

  • documentação;

  • scripts de publicação.

À primeira vista, parece que a programação desapareceu.

Mas ela não desapareceu.

Ela mudou de lugar.

Antes, boa parte do esforço estava em escrever instruções para a máquina utilizando uma linguagem formal.

Agora, parte do esforço passa a estar em descrever corretamente:

  • qual é o problema;

  • quem tem esse problema;

  • qual comportamento é esperado;

  • quais são os limites;

  • quais dados serão usados;

  • o que não deve ser criado;

  • como saberemos se o resultado está correto.

O programador deixa de ser apenas o tripulante que aperta os botões do console e passa a atuar também como:

  • analista;

  • arquiteto;

  • testador;

  • supervisor;

  • dono do produto;

  • comandante da ponte.

O Vibe Coding não elimina o raciocínio técnico. Ele pune, de maneira quase imediata, quem tenta evitá-lo.


Capítulo 1 — Não comece pela aplicação. Comece pelo problema.

Um dos maiores erros de quem entra no Vibe Coding é começar com a solução.

A pessoa diz:

“Quero criar uma rede social.”

Ou:

“Quero criar um aplicativo com inteligência artificial.”

Ou ainda:

“Quero construir o próximo Airbnb.”

Essas frases podem soar empolgantes, mas não descrevem um problema real. Elas descrevem categorias de produtos ou ambições gigantescas.

Uma boa missão começa com três elementos:

  1. uma pessoa específica;

  2. um problema concreto;

  3. um resultado desejado.

Por exemplo:

Programadores COBOL iniciantes têm dificuldade para interpretar códigos de ABEND porque as informações estão espalhadas em manuais extensos e ambientes diferentes.

Agora temos uma situação clara.

A partir dela, poderíamos criar um pequeno aplicativo chamado:

ABEND Navigator

O usuário digitaria um código, como:

S0C7

E receberia:

  • significado do erro;

  • causas mais comuns;

  • perguntas de diagnóstico;

  • exemplos de código;

  • sugestões de correção;

  • cuidados para evitar recorrência.

Perceba a diferença.

“Criar uma plataforma de mainframe com IA” é nebuloso.

“Consultar causas e soluções iniciais de ABENDs” é concreto, testável e viável.

A fórmula Bellacosa para definir o problema

Use esta estrutura:

[Público] precisa de uma maneira de [ação] porque atualmente enfrenta [dificuldade].

Exemplos:

Analistas iniciantes precisam de uma maneira de organizar comandos JCL porque os exemplos estão dispersos em apostilas e anotações.

Estudantes de COBOL precisam de uma maneira de acompanhar o que estudaram porque esquecem quais assuntos precisam de revisão.

Pequenos comerciantes precisam de uma maneira simples de registrar vendas diárias porque utilizam cadernos e planilhas desorganizadas.

Essa frase funciona como as coordenadas da nave.

Sem coordenadas, até uma Enterprise equipada com os melhores computadores pode terminar dentro de um campo de asteroides.


Capítulo 2 — Escolha uma única funcionalidade inicial

Quando a ideia surge, o entusiasmo costuma assumir o controle.

O criador começa a listar:

  • cadastro de usuário;

  • painel;

  • chat;

  • notificações;

  • relatórios;

  • pagamento;

  • inteligência artificial;

  • integração com WhatsApp;

  • exportação para PDF;

  • modo escuro;

  • aplicativo para celular;

  • ranking;

  • gamificação;

  • rede social;

  • marketplace.

Em poucos minutos, aquele pequeno projeto se transforma em um sistema maior que o computador central da Federação.

Esse fenômeno recebe um nome conhecido na engenharia de software:

Scope creep

É o crescimento descontrolado do escopo.

O projeto começa com uma funcionalidade simples e, pouco a pouco, acumula tantas exigências que ninguém mais sabe qual problema ele deveria resolver.

A primeira versão precisa responder apenas uma pergunta:

A funcionalidade principal ajuda o usuário a resolver o problema?

No caso do ABEND Navigator, a primeira funcionalidade seria:

Digitar um código de ABEND e receber uma orientação estruturada.

Só isso.

Sem login.

Sem favoritos.

Sem assinatura premium.

Sem chatbot holográfico inspirado no computador da Enterprise.

Esses elementos podem ser adicionados depois, caso usuários reais demonstrem necessidade.


MVP não significa produto ruim

MVP é a sigla para Minimum Viable Product, ou Produto Mínimo Viável.

Existe uma confusão comum:

“Se é mínimo, pode ser malfeito.”

Não pode.

O MVP pode ter poucas funcionalidades, mas precisa ser confiável dentro do que promete.

Um sistema simples ainda deve:

  • validar dados;

  • exibir mensagens claras;

  • preservar informações;

  • evitar falhas óbvias;

  • proteger informações sensíveis;

  • funcionar no dispositivo esperado;

  • possuir um fluxo compreensível.

O MVP reduz a quantidade de recursos.

Ele não reduz a responsabilidade.

Um programa COBOL que possui apenas três rotinas ainda precisa calcular corretamente. Ninguém aceita um pagamento errado porque o programa era “uma primeira versão”.


Capítulo 3 — Escolha uma ferramenta e permaneça tempo suficiente para aprender

O ecossistema de Vibe Coding oferece diversas ferramentas.

Existem plataformas voltadas para:

  • criação rápida de aplicações;

  • geração de interfaces;

  • edição de código com IA;

  • execução no navegador;

  • publicação automatizada;

  • criação de componentes;

  • desenvolvimento com agentes.

O iniciante olha para todas elas e pensa:

“Preciso testar cada uma antes de começar.”

É assim que nasce o turismo de ferramentas.

Na segunda-feira, ele abre uma plataforma.

Na terça-feira, assiste a um vídeo sobre outra.

Na quarta-feira, migra o projeto.

Na quinta-feira, descobre uma terceira que promete ser dez vezes melhor.

Na sexta-feira, possui cinco contas, quatro projetos incompletos e nenhuma aplicação publicada.

Escolher a ferramenta perfeita é menos importante do que escolher uma ferramenta adequada e aprender seu fluxo.

Perguntas para escolher a ferramenta

Antes de decidir, avalie:

  • ela gera código exportável?

  • consigo executar o projeto fora da plataforma?

  • existe um plano gratuito para testes?

  • a publicação é simples?

  • há suporte ao banco de dados necessário?

  • consigo utilizar controle de versão?

  • os custos são previsíveis?

  • consigo recuperar versões anteriores?

  • a ferramenta atende ao nível de complexidade do projeto?

A melhor ferramenta não é necessariamente a mais famosa.

É aquela que permite construir, testar, entender e manter sua aplicação.


Capítulo 4 — O primeiro prompt é uma especificação disfarçada

Um prompt ruim gera um projeto baseado em adivinhações.

Considere:

“Faça um aplicativo de estudos.”

A IA precisará decidir sozinha:

  • quem é o usuário;

  • quais assuntos serão estudados;

  • quais telas existirão;

  • se haverá login;

  • como os dados serão armazenados;

  • quais relatórios serão exibidos;

  • qual tecnologia será usada.

Ela preencherá essas lacunas com hipóteses.

Algumas serão razoáveis.

Outras serão completamente incompatíveis com o que você imaginava.

Agora veja este prompt:

Crie uma aplicação web responsiva para estudantes de COBOL organizarem sessões de estudo. A primeira versão deve permitir cadastrar assunto, categoria, duração planejada e data. O usuário deve visualizar as sessões do dia e marcar cada sessão como concluída. Não implemente login, pagamentos, compartilhamento, notificações ou gamificação. Antes de gerar código, apresente a arquitetura proposta, a estrutura das telas, os dados necessários e os critérios de aceitação.

Aqui temos:

  • público definido;

  • problema implícito;

  • funcionalidade principal;

  • limite de escopo;

  • comportamento esperado;

  • exigência de planejamento.

Quanto mais contexto fornecemos, menos a IA precisa inventar.

Os sete elementos de um bom prompt inicial

Um prompt sólido deve indicar:

  1. Público — quem utilizará o sistema;

  2. Problema — qual dificuldade será resolvida;

  3. Objetivo — o que o usuário conseguirá fazer;

  4. Escopo — o que entra na primeira versão;

  5. Limites — o que não deve ser criado;

  6. Critérios — como saber se funciona;

  7. Processo — o que a IA deve apresentar antes de codificar.

Essa estrutura se aproxima muito de uma especificação funcional tradicional.

A diferença é que agora ela é escrita em linguagem natural e utilizada diretamente na construção.


Capítulo 5 — Antes do código, peça o plano de voo

Uma das práticas mais importantes no Vibe Coding é pedir um plano antes da implementação.

A tentação é grande.

Você descreve o projeto e quer ver imediatamente a tela funcionando.

Mas dez minutos analisando o plano podem economizar horas de correção.

Antes de gerar código, solicite:

  • arquitetura;

  • fluxo do usuário;

  • telas;

  • componentes;

  • estrutura dos dados;

  • validações;

  • riscos;

  • estratégia de testes;

  • processo de publicação.

Depois, questione.

Pergunte:

Por que essa arquitetura foi escolhida?

Existe uma alternativa mais simples?

O sistema realmente precisa de banco de dados?

Quais requisitos foram inferidos?

Quais são os principais riscos?

Que parte pode gerar custo futuro?

Existe alguma dependência que pode prender o projeto à plataforma?

Essa etapa é semelhante a revisar um fluxograma antes de escrever um programa COBOL de cinco mil linhas.

É muito mais barato corrigir uma seta no diagrama do que descobrir em produção que a rotina de fechamento contábil está executando antes da validação.


O poder da pergunta: “O que você presumiu?”

Essa é uma das perguntas mais poderosas para trabalhar com IA:

Quais decisões você tomou com base em suposições que eu não informei?

A IA pode responder que presumiu:

  • um único usuário;

  • idioma português;

  • armazenamento local;

  • ausência de dados sensíveis;

  • uso em desktop;

  • ausência de autenticação;

  • disponibilidade permanente da internet.

Agora você pode validar ou corrigir cada hipótese.

Uma inteligência artificial não distingue automaticamente uma regra real de uma lacuna preenchida por probabilidade.

Cabe ao comandante confirmar as coordenadas.


Capítulo 6 — Uma mudança por vez

Após gerar o protótipo, começa a fase de ajustes.

É comum enviar um pedido assim:

“Troque o menu, coloque login, corrija o formulário, mude as cores, adicione um gráfico, crie o banco, ajuste o celular e publique.”

Isso parece eficiente.

Na prática, aumenta brutalmente a chance de regressões.

A IA pode corrigir o formulário e quebrar a navegação.

Pode adicionar o banco e remover dados simulados ainda usados por outras telas.

Pode alterar o layout e destruir a responsividade.

A abordagem correta é trabalhar em mudanças pequenas.

Exemplo:

No formulário de cadastro, impeça que o campo “Assunto” seja enviado vazio. Não altere outros componentes.

Depois:

Mostre uma mensagem de erro abaixo do campo. Preserve o layout atual.

Depois:

Crie um teste para validar esse comportamento.

Uma alteração por vez oferece:

  • maior controle;

  • teste mais simples;

  • reversão mais fácil;

  • menor risco;

  • melhor compreensão do projeto.

Programadores COBOL experientes conhecem esse princípio.

Quando um programa processa milhões de registros, você não altera vinte parágrafos sem necessidade porque encontrou uma condição incorreta em VALIDA-CLIENTE.

Na manutenção, precisão vale mais do que entusiasmo.


Capítulo 7 — Screenshots são telemetria visual

Uma das grandes vantagens das ferramentas modernas é a possibilidade de utilizar imagens durante a conversa.

Em vez de escrever:

“A tela está estranha.”

Você pode anexar uma captura e explicar:

No celular, o botão “Salvar” ultrapassa o limite do cartão. Ele deve ocupar toda a largura disponível abaixo dos campos. Não altere a versão desktop.

A imagem reduz ambiguidades.

Ela mostra:

  • a posição do erro;

  • o tamanho dos elementos;

  • o estado da aplicação;

  • a diferença entre o esperado e o atual.

Como enviar um bom pedido com screenshot

Inclua quatro elementos:

  1. Localização
    “No cartão superior direito...”

  2. Problema atual
    “O texto sobrepõe o botão...”

  3. Resultado esperado
    “O título deve quebrar em até duas linhas...”

  4. Limite da mudança
    “Não altere os demais cartões...”

A captura de tela é como um painel de diagnóstico.

Ela ajuda, mas ainda precisa de interpretação.

Um alerta no console da Enterprise não diz sozinho qual decisão o capitão deve tomar.


Capítulo 8 — Banco de dados apenas quando houver motivo

Muitos projetos de Vibe Coding começam com uma infraestrutura maior do que o próprio problema.

Antes de validar a funcionalidade, o criador já possui:

  • banco relacional;

  • autenticação;

  • funções serverless;

  • APIs;

  • triggers;

  • filas;

  • armazenamento;

  • regras de acesso;

  • painel administrativo.

Ele passa dias configurando tecnologia e quase nenhum tempo testando se alguém precisa da aplicação.

Para um protótipo, muitas vezes é suficiente utilizar:

  • dados simulados;

  • arquivo JSON;

  • armazenamento local;

  • planilha;

  • estrutura temporária em memória.

O banco de dados passa a ser necessário quando precisamos:

  • persistir dados entre dispositivos;

  • trabalhar com vários usuários;

  • controlar permissões;

  • relacionar entidades;

  • processar volumes maiores;

  • manter histórico;

  • garantir consistência.

Exemplo prático

Considere um diário de estudos.

Na primeira versão, o navegador pode armazenar:

Assunto
Categoria
Data
Nível de confiança
Observação

Se o usuário utiliza somente um computador, isso pode ser suficiente para validar a ideia.

Mais tarde, ao precisar acessar pelo celular e pelo desktop, um banco remoto passa a fazer sentido.

A regra é simples:

Adicione complexidade quando ela resolver um problema real, não quando parecer tecnologicamente elegante.


Capítulo 9 — A IA também pode modelar dados errado

A inteligência artificial pode criar uma tabela em segundos.

Isso não significa que a estrutura esteja correta.

Imagine uma tabela:

TAREFAS
ID
USUARIO
CLIENTE
TITULO
STATUS
PRAZO
OBSERVACAO

Para uma demonstração, pode funcionar.

Mas, se vários clientes possuem muitas tarefas, provavelmente teremos entidades separadas:

USUARIOS
CLIENTES
TAREFAS

Agora surgem perguntas importantes:

  • qual é a chave de cada tabela?

  • uma tarefa pode existir sem cliente?

  • o que acontece quando um cliente é excluído?

  • precisamos guardar histórico?

  • o status possui valores controlados?

  • uma tarefa pertence a um ou mais usuários?

  • informações antigas podem ser alteradas?

Essas decisões continuam existindo.

Vibe Coding não revogou normalização, integridade referencial ou consistência transacional.

No mundo mainframe, ninguém trataria a estrutura de um arquivo VSAM ou uma tabela Db2 como detalhe decorativo.

Dados são o coração do sistema.

A interface pode mudar.

A tecnologia pode mudar.

Mas um dado mal modelado costuma assombrar o projeto por muitos anos.


Capítulo 10 — Segurança: o campo minado escondido

Aplicações geradas rapidamente podem conter vulnerabilidades sérias.

Entre os problemas mais frequentes estão:

  • chaves de API expostas;

  • senhas armazenadas de forma inadequada;

  • ausência de validação no servidor;

  • acesso aos dados de outros usuários;

  • permissões excessivas;

  • informações pessoais em logs;

  • upload de arquivos sem controle;

  • dependências vulneráveis;

  • consultas inseguras.

A interface pode parecer maravilhosa enquanto o sistema possui uma porta aberta no casco da nave.

Nunca aceite uma declaração genérica como:

“A aplicação está segura.”

Peça explicações concretas:

Onde os segredos são armazenados?

Alguma chave é enviada para o navegador?

Como um usuário é impedido de acessar dados de outro?

A validação ocorre apenas na tela ou também no servidor?

Existe proteção contra envio duplicado?

Quais informações aparecem nos logs?

Como os dados são excluídos?

Quais bibliotecas foram instaladas?

Para sistemas que lidam com pagamentos, saúde, dados pessoais, documentos ou credenciais, a revisão humana especializada é indispensável.

A IA pode acelerar o trabalho.

Ela não pode assumir legalmente a responsabilidade pelo vazamento.


Capítulo 11 — Teste o usuário real, não o usuário imaginário

A IA costuma demonstrar o caminho perfeito:

  1. o usuário preenche tudo corretamente;

  2. clica uma vez;

  3. a conexão está estável;

  4. o banco responde;

  5. a operação termina.

Usuários reais fazem coisas muito mais interessantes.

Eles:

  • deixam campos vazios;

  • digitam texto em campos numéricos;

  • clicam duas vezes;

  • perdem a conexão;

  • voltam pelo navegador;

  • abrem várias abas;

  • colam textos enormes;

  • utilizam caracteres especiais;

  • fecham a tela no meio da operação.

Por isso, teste pelo menos os seguintes cenários.

Caminho feliz

Dados válidos, fluxo normal e resultado esperado.

Entrada inválida

Campos vazios, números negativos, datas impossíveis e formatos errados.

Repetição

Cliques duplos, envio repetido e atualização da página.

Interrupção

Falha de rede, erro do servidor ou fechamento inesperado.

Permissão

Tentativa de acessar recursos de outro usuário.

Persistência

Verificação de que os dados permanecem corretos após reiniciar.

Responsividade

Teste em computador, tablet e celular.

Volume

Teste com dez, cem e mil registros, quando fizer sentido.

O programa não está pronto porque funcionou uma vez.

Ele começa a merecer confiança quando continua funcionando diante de comportamentos imperfeitos.


Capítulo 12 — Controle de versão: o botão de voltar no tempo

Uma das práticas mais importantes no desenvolvimento é o controle de versão.

Ferramentas como Git permitem registrar o estado do projeto ao longo do tempo.

Antes de uma mudança importante, você cria um ponto de recuperação.

Se algo quebrar, pode comparar versões ou retornar.

Sem controle de versão, o fluxo costuma ser:

projeto-final
projeto-final-2
projeto-final-agora-vai
projeto-final-correto
projeto-final-correto-mesmo
projeto-final-correto-mesmo-ultimo

Esse sistema de nomes funciona apenas até o dia em que ninguém lembra qual versão realmente funcionava.

No Vibe Coding, o controle de versão é ainda mais importante porque agentes podem alterar vários arquivos rapidamente.

Uma boa instrução é:

Antes de modificar, informe quais arquivos serão alterados. Faça a mudança em uma etapa isolada e gere um resumo ao final.

E, idealmente:

Crie um commit antes da alteração.

Mesmo quem está começando deve aprender pelo menos:

git init
git status
git add .
git commit -m "Versão inicial funcional"

Isso já cria uma rede de segurança.

Na Frota Estelar, antes de testar uma dobra experimental, alguém certamente registra o estado dos sistemas. Pelo menos deveria.


Capítulo 13 — Publicar cedo, mas não de maneira irresponsável

Manter o projeto para sempre no computador impede o aprendizado real.

O usuário precisa testar.

A publicação revela problemas que não aparecem no ambiente local:

  • lentidão;

  • diferenças de navegador;

  • falhas de configuração;

  • permissões;

  • erros de rota;

  • comportamento em dispositivos móveis;

  • custos inesperados.

Entretanto, publicar cedo não significa lançar um sistema inseguro para milhares de pessoas.

Uma estratégia sensata é:

  1. testar localmente;

  2. compartilhar com uma pessoa;

  3. corrigir problemas graves;

  4. liberar para cinco usuários;

  5. observar o uso;

  6. coletar feedback;

  7. estabilizar;

  8. ampliar gradualmente.

Essa abordagem é chamada de liberação progressiva.

Ela reduz risco e melhora o aprendizado.

Tenha um plano de reversão

Antes de publicar, responda:

  • como volto para a versão anterior?

  • existe backup?

  • onde os erros serão registrados?

  • quem será avisado em caso de falha?

  • consigo desativar a funcionalidade?

  • os dados serão preservados durante a reversão?

Publicar sem rollback é como entrar em dobra sem saber como reduzir a velocidade.

Pode funcionar.

Mas você não quer descobrir o contrário perto de uma estrela.


Capítulo 14 — Feedback real vale mais que elogio educado

Depois que os primeiros usuários testarem, não pergunte apenas:

“Você gostou?”

Quase todos responderão “sim”.

Perguntas melhores são:

Em que momento você ficou confuso?

O que esperava que acontecesse ao clicar?

Qual etapa demorou mais?

Que tarefa você ainda precisou fazer fora da aplicação?

Qual parte parece desnecessária?

Você usaria isso novamente amanhã?

O objetivo não é receber aplausos.

É descobrir atrito.

Talvez você tenha criado um painel sofisticado com gráficos, enquanto os usuários realmente desejam um botão simples para duplicar o registro anterior.

O usuário real frequentemente destrói nossas teorias em menos de cinco minutos.

E isso é ótimo.

Cada hipótese destruída cedo economiza meses de trabalho na direção errada.


Capítulo 15 — O programador COBOL possui uma vantagem secreta

À primeira vista, Vibe Coding parece pertencer apenas ao universo de JavaScript, aplicações web e startups.

Mas programadores COBOL possuem uma vantagem enorme.

Eles estão acostumados a pensar em:

  • regras de negócio;

  • processamento confiável;

  • validação;

  • dados;

  • impacto de alterações;

  • transações;

  • recuperação;

  • produção;

  • manutenção de longo prazo.

Um programador COBOL sabe que o valor do sistema não está apenas na sintaxe.

Não é o MOVE, o PERFORM ou o EVALUATE que sustenta um banco.

É o entendimento do processo.

Da mesma forma, no Vibe Coding, saber pedir código é apenas uma parte.

O verdadeiro diferencial é saber:

  • o que deve ser construído;

  • o que não deve ser construído;

  • qual regra não pode falhar;

  • qual dado precisa ser protegido;

  • qual cenário precisa ser testado;

  • qual alteração pode afetar outra rotina.

O Padawan COBOL que aprende a utilizar IA sem abandonar seus fundamentos pode se tornar um profissional extremamente poderoso.

Ele combina:

  • experiência de negócio;

  • disciplina de sistemas críticos;

  • conhecimento de dados;

  • capacidade de modernização;

  • velocidade de ferramentas generativas.

É quase como instalar motores de dobra em uma nave construída para sobreviver décadas.


Capítulo 16 — Exemplo completo: COBOL Learning Log

Vamos construir mentalmente uma aplicação simples.

Problema

Estudantes de mainframe aprendem muitos assuntos, mas não acompanham o que já estudaram e o que precisa de revisão.

Público

Programadores COBOL iniciantes.

Objetivo

Registrar tópicos estudados e indicar o nível de confiança.

Funcionalidade principal

Cadastrar e consultar tópicos de estudo.

Dados mínimos

  • assunto;

  • categoria;

  • data;

  • nível de confiança;

  • observação.

Categorias

  • COBOL;

  • JCL;

  • Db2;

  • CICS;

  • VSAM;

  • z/OS.

Fora do escopo inicial

  • login;

  • pagamentos;

  • certificados;

  • chat;

  • integração com cursos;

  • ranking;

  • gamificação;

  • IA recomendando conteúdo.

Prompt inicial

Ajude-me a criar uma aplicação web responsiva chamada COBOL Learning Log, destinada a estudantes iniciantes de mainframe. O problema é que eles estudam vários tópicos, mas não possuem uma visão clara do que aprenderam e do que precisa de revisão.

A primeira versão deve permitir cadastrar um tópico contendo nome, categoria, data de estudo, nível de confiança de 1 a 5 e observação opcional. A tela inicial deve listar os registros e permitir filtro por categoria.

Não implemente login, pagamentos, certificados, compartilhamento, chat ou integração com IA.

Antes de gerar código, apresente a arquitetura mais simples, o fluxo do usuário, as telas, a estrutura dos dados, as validações, os testes e a estratégia de publicação.

Utilize armazenamento local inicialmente. Faça no máximo cinco perguntas caso alguma decisão seja indispensável.

Critérios de aceitação

  • assunto obrigatório;

  • categoria obrigatória;

  • nível entre 1 e 5;

  • data não pode estar no futuro;

  • dados permanecem após atualizar;

  • filtro funciona corretamente;

  • exclusão exige confirmação;

  • interface funciona no celular.

Perceba como o projeto deixou de ser uma ideia vaga.

Agora temos uma missão clara, critérios objetivos e fronteiras definidas.


Capítulo 17 — O ciclo Bellacosa de Vibe Coding

Um fluxo seguro pode seguir dez etapas.

1. Descrever

Explique o problema e o público.

2. Limitar

Escolha uma única funcionalidade principal.

3. Planejar

Peça arquitetura, telas e dados antes do código.

4. Questionar

Investigue suposições, riscos e custos.

5. Construir

Implemente uma parte pequena.

6. Executar

Teste no ambiente real.

7. Observar

Compare o resultado com os critérios.

8. Corrigir

Faça uma mudança por vez.

9. Publicar

Disponibilize para poucos usuários.

10. Aprender

Use o feedback para decidir o próximo passo.

Depois, repita.

Esse ciclo é muito mais importante do que qualquer ferramenta específica.

Ferramentas mudam.

Modelos mudam.

Plataformas surgem e desaparecem.

O processo continua válido.


Capítulo 18 — Um prompt mestre para sua próxima missão

Utilize este modelo:

Atue como analista de produto, arquiteto de software, desenvolvedor e testador responsável.

Ajude-me a criar um aplicativo para [PÚBLICO] resolver [PROBLEMA].

O resultado principal esperado é [RESULTADO].

Antes de gerar código:

  1. reescreva o problema de forma objetiva;

  2. identifique dúvidas e suposições;

  3. proponha um MVP com uma única funcionalidade central;

  4. liste o que ficará fora da primeira versão;

  5. recomende a ferramenta mais simples;

  6. descreva o fluxo do usuário;

  7. proponha as telas;

  8. modele os dados mínimos;

  9. liste validações;

  10. identifique riscos de segurança;

  11. crie critérios de aceitação;

  12. prepare casos de teste;

  13. explique a publicação;

  14. defina uma estratégia de rollback.

Não acrescente funcionalidades sem minha autorização.

Durante a implementação, faça uma mudança por vez, informe quais arquivos serão alterados e preserve tudo o que já estiver funcionando.

Esse prompt não garante perfeição.

Mas cria um ambiente muito mais controlado.


Curiosidades do convés de engenharia

A IA não “entende” seu projeto como um colega humano

Ela trabalha a partir do contexto disponível.

Quando informações faltam, ela pode completar as lacunas com padrões estatísticos.

Isso significa que uma resposta convincente pode conter uma decisão errada.

Código bonito não significa código correto

Uma interface elegante pode esconder:

  • regra incorreta;

  • falha de segurança;

  • cálculo errado;

  • dados inconsistentes;

  • dependência problemática.

O protótipo é uma pergunta, não uma resposta

Seu objetivo inicial não é provar que a ideia é genial.

É descobrir se ela resolve um problema.

A complexidade cobra juros

Cada banco, integração, serviço e dependência adiciona custo de manutenção.

O usuário raramente pede aquilo de que realmente precisa

Ele pode pedir um gráfico.

Após observar seu trabalho, você descobre que ele precisava de um alerta.


Easter egg da Frota Estelar

Em muitas histórias de Star Trek, o computador da Enterprise parece capaz de executar quase qualquer ordem:

“Computador, analise a composição da atmosfera.”

“Computador, localize a nave.”

“Computador, simule o cenário.”

Mas observe um detalhe.

Os oficiais fazem perguntas específicas.

Eles informam parâmetros.

Eles verificam resultados.

Eles discordam do computador.

Eles cruzam dados.

Eles assumem o comando quando a situação muda.

A ficção nunca disse que possuir um computador poderoso eliminaria a necessidade de julgamento humano.

Na verdade, ela sugeriu o contrário.

Quanto mais poderosa a tecnologia, mais importante se torna a responsabilidade de quem a utiliza.

Vibe Coding é exatamente isso.

Temos acesso a uma espécie de computador de bordo capaz de criar sistemas em minutos.

A pergunta não é apenas:

“O que ele consegue construir?”

A pergunta mais importante é:

“Somos capazes de descrever corretamente o que deve ser construído?”


Conclusão — A IA é o motor de dobra, não o capitão

Vibe Coding representa uma transformação extraordinária.

Pessoas que nunca construíram software podem criar protótipos.

Programadores experientes podem acelerar tarefas repetitivas.

Empresas podem validar ideias em menos tempo.

Estudantes podem aprender observando código funcional.

Mas nenhum desses benefícios elimina os fundamentos.

Um bom sistema ainda exige:

  • clareza;

  • escopo;

  • análise;

  • validação;

  • testes;

  • segurança;

  • controle de versão;

  • observabilidade;

  • responsabilidade;

  • aprendizado contínuo.

A habilidade principal do futuro talvez não seja escrever cada linha manualmente.

Será saber conduzir máquinas capazes de escrevê-las.

O programador deixará de ser apenas quem produz instruções e se tornará cada vez mais quem:

  • define intenções;

  • estabelece limites;

  • avalia riscos;

  • verifica resultados;

  • protege usuários;

  • decide prioridades;

  • mantém coerência.

Para o Programador COBOL Padawan, isso não é uma ameaça.

É uma oportunidade histórica.

Você já conhece o valor da precisão.

Já sabe que uma pequena regra pode movimentar milhões.

Já aprendeu que sistemas vivem muito mais tempo do que a primeira versão imaginava.

Agora chegou o momento de levar essa disciplina para o universo da inteligência artificial.

Use a IA.

Explore.

Construa.

Publique.

Mas nunca abandone o painel de comando.

Porque, no final, não importa quantos agentes, modelos ou geradores estejam trabalhando na sala de máquinas.

Quando o alerta vermelho tocar, alguém ainda precisará sentar na cadeira do capitão e dizer:

“Computador, explique exatamente o que você alterou.”

E talvez acrescentar:

“Desta vez, sem mexer no módulo que já estava funcionando.”

Vibe on, Padawan. Mas mantenha o controle da nave.

quarta-feira, 6 de dezembro de 2023

Bootcamp DIO Projeto LusoFlix : Programadores FrontEnd em HTML, CSS e JavaScript

Bellacosa Mainframe apresenta o projeto DIO Bootcamp Lusoflix


☕ Um Café no Bellacosa Mainframe

LusoFlix sem Mistérios para Programadores HTML, CSS e JavaScript

Quando um Programador Mainframe Descobre que uma Página Inspirada na Netflix Também Pode Guardar Viagens, Castelos, Histórias e Memórias de Portugal

Há projetos que nascem para ensinar uma propriedade do CSS.

Outros surgem para demonstrar uma biblioteca JavaScript.

Alguns existem apenas para cumprir uma atividade de bootcamp, receber uma avaliação e depois desaparecer em algum diretório chamado:

C:\CURSOS\PROJETOS\FINAL\FINAL_AGORA_VAI\

Mas, ocasionalmente, um exercício acadêmico escapa de sua finalidade original.

Ele ganha personalidade.

Recebe um nome próprio.

Passa a carregar fotografias, lembranças, histórias, viagens e pequenos fragmentos da vida de seu criador.

Foi exatamente isso que aconteceu com o LusoFlixhttps://vagnerbellacosa.github.io/002_WebDeveloper_ReplicaNetflix/

O projeto nasceu como uma recriação da interface inicial da Netflix, desenvolvida com HTML, CSS e JavaScript durante um laboratório de desenvolvimento web. Entretanto, em vez de simplesmente copiar filmes, séries e cartazes fictícios, a solução recebeu uma identidade própria: tornou-se uma homenagem a Portugal e um catálogo visual de vídeos publicados no YouTube sobre cidades, monumentos, castelos, praias, igrejas, gastronomia e experiências vividas em terras lusitanas. (GitHub)

Em outras palavras, o exercício deixou de ser apenas:

CLONE NETFLIX

e passou a funcionar como:

PORTAL AUDIOVISUAL DE MEMÓRIAS SOBRE PORTUGAL

É como se alguém tivesse recebido a missão de copiar uma tela de CICS e decidido transformá-la em um sistema completo de consulta histórica.

O LusoFlix demonstra algo essencial para todo programador iniciante:

Uma tecnologia pode ser aprendida através de exercícios, mas somente se torna realmente nossa quando a usamos para contar alguma coisa que nos pertence.

Nesta investigação do Bellacosa Mainframe, abriremos o código do LusoFlix como se estivéssemos analisando um dump de produção.

Examinaremos:

  • a estrutura HTML;

  • a estilização com CSS;

  • a pequena, mas importante, participação do JavaScript;

  • o uso de bibliotecas externas;

  • os carrosséis inspirados em serviços de streaming;

  • a integração com vídeos do YouTube;

  • o conteúdo sobre Portugal;

  • a hospedagem no GitHub Pages;

  • os recursos de SEO e compartilhamento;

  • os pontos fortes do projeto;

  • as melhorias possíveis;

  • e tudo aquilo que o HTML moderno permite construir atualmente.

Sirva o café.

Abra o navegador.

A investigação começou.


1. A cena inicial: o que é o LusoFlix?

O LusoFlix é uma aplicação web estática inspirada visualmente na página inicial da Netflix.

A página apresenta:

  • um cabeçalho com o logotipo LUSOFLIX;

  • um menu de navegação;

  • uma imagem principal de destaque;

  • botões de ação;

  • diversas categorias de vídeos;

  • carrosséis horizontais;

  • miniaturas clicáveis;

  • links para vídeos e playlists no YouTube;

  • informações adicionais sobre Portugal;

  • elementos de compartilhamento e SEO.

O próprio repositório define o projeto como uma réplica da página inicial da Netflix criada com HTML, CSS e JavaScript, utilizando bibliotecas externas. A adaptação temática substitui o catálogo tradicional por miniaturas de vídeos relacionados a viagens por Portugal. (GitHub)

Essa mudança de tema é mais importante do que pode parecer.

Um clone literal normalmente ensina apenas reprodução visual.

Já uma adaptação exige decisões.

O desenvolvedor precisa perguntar:

  • Qual será o conteúdo principal?

  • Como os itens serão categorizados?

  • Que imagem será usada no destaque?

  • Para onde apontarão os botões?

  • Como transformar vídeos do YouTube em um catálogo?

  • Como organizar dezenas de elementos sem perder coerência visual?

É justamente nessa adaptação que o exercício deixa de ser uma simples cópia.

O programador começa a trabalhar como projetista.


2. O HTML como DATA DIVISION da página

Para um programador COBOL, podemos comparar o HTML com uma mistura entre a DATA DIVISION e a estrutura de telas de um sistema online.

O HTML não determina, sozinho, todas as cores, animações ou comportamentos.

Sua principal responsabilidade é declarar:

  • o que existe;

  • qual é a hierarquia;

  • qual é o significado dos elementos;

  • como as partes da página estão organizadas.

O documento começa corretamente com:

<!DOCTYPE html>
<html lang="pt-br">

O DOCTYPE informa ao navegador que o documento utiliza HTML5.

Já o atributo:

lang="pt-br"

indica que o conteúdo está em português do Brasil.

Isso ajuda:

  • leitores de tela;

  • motores de busca;

  • ferramentas de tradução;

  • corretores ortográficos;

  • sistemas de acessibilidade.

Logo depois, o projeto define:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

O charset="UTF-8" permite representar corretamente acentos, cedilhas e outros caracteres.

Sem isso, uma palavra como:

informações

poderia aparecer como uma pequena cena de crime digital:

informações

A meta tag viewport, por sua vez, é essencial para dispositivos móveis. Ela instrui o navegador a adaptar a largura da página à largura real da tela. Esses elementos aparecem logo no início do documento do LusoFlix.

Pense no viewport como um parâmetro de execução.

Sem ele, o navegador móvel tenta exibir a página como se estivesse simulando uma tela de desktop muito larga.

É praticamente um emulador 3270 tentando adivinhar a resolução de um smartphone.


3. O cabeçalho: identidade e navegação

O cabeçalho apresenta uma estrutura bastante clara:

<header>
    <div class="container">
        <h2 class="logo">LUSOFLIX</h2>

        <nav>
            <a href="...">Inicio</a>
            <a href="...">Lisboa</a>
            <a href="...">Turismo</a>
            <a href="...">Gastronomia</a>
        </nav>
    </div>
</header>

Temos aqui três componentes fundamentais:

header

Representa semanticamente o cabeçalho da página.

h2

Apresenta o nome do serviço.

nav

Agrupa os links principais de navegação.

O uso de elementos semânticos como header, nav, main e footer é uma das grandes evoluções do HTML moderno.

No passado, muitas páginas eram construídas quase exclusivamente com:

<div>

Era comum encontrar algo assim:

<div id="topo">
<div id="menu">
<div id="conteudo">
<div id="rodape">

Funcionava, mas o navegador não compreendia claramente a função de cada bloco.

Com HTML5, podemos informar o significado estrutural:

<header>
<nav>
<main>
<section>
<article>
<footer>

Essa semântica ajuda tanto os mecanismos de busca quanto as tecnologias assistivas.

No LusoFlix, os links do menu direcionam o visitante para vídeos relacionados ao início da jornada, Lisboa, turismo e gastronomia.

O menu não está ali apenas como decoração.

Ele funciona como um pequeno índice temático do acervo audiovisual.


4. O herói da página: a área de destaque

Todo serviço de streaming possui um conteúdo destacado.

É aquele grande painel que tenta capturar a atenção do visitante antes que ele comece a navegar pelo catálogo.

No LusoFlix, essa responsabilidade pertence à classe:

<div class="filme-principal">

Dentro dela encontramos:

<h3 class="titulo">Portugal</h3>

<p class="descricao">
    Venha conhecer uma terra belissima...
</p>

e dois botões principais:

ASSISTIR AGORA
MAIS INFORMAÇÕES

O primeiro direciona para uma playlist do YouTube.

O segundo leva o visitante a um blog com informações adicionais sobre Portugal.

Isso representa um padrão clássico de UX, a experiência do usuário:

  • uma ação principal;

  • uma ação secundária.

A ação principal diz:

Veja o conteúdo.

A ação secundária diz:

Conheça o contexto.

Em termos de sistema, poderíamos representar:

OPÇÃO 1 — EXECUTAR
OPÇÃO 2 — CONSULTAR DETALHES

A interface inspirada na Netflix funciona justamente porque aproveita um modelo mental que o usuário já conhece.

Ele vê um grande banner, encontra um botão de reprodução e imediatamente entende o que deve fazer.

Não é necessário explicar o fluxo.

A própria interface conduz o visitante.


5. O CSS entra na sala de interrogatório

Se o HTML define a estrutura, o CSS define a apresentação.

No arquivo principal de estilos, o LusoFlix começa declarando duas variáveis:

:root {
    --vermelho: #E50914;
    --preta: #141414;
}

Essas são Custom Properties, popularmente chamadas de variáveis CSS.

Em vez de repetir uma cor em vários lugares:

color: #E50914;
background: #141414;

o desenvolvedor pode usar:

color: var(--vermelho);
background: var(--preta);

As variáveis CSS funcionam como constantes de configuração visual.

Para um programador COBOL, a ideia lembra declarar valores centralizados na WORKING-STORAGE:

01 WS-COR-PRINCIPAL PIC X(7) VALUE '#E50914'.

Naturalmente, CSS e COBOL são mundos diferentes, mas a filosofia é semelhante:

Evite espalhar valores mágicos pelo programa.

Se amanhã o LusoFlix quiser trocar o vermelho por verde, basta alterar a variável principal.

Sem variáveis, seria necessário procurar dezenas de ocorrências.

Com variáveis, temos uma espécie de tabela de parâmetros visuais.

As cores escolhidas reproduzem a identidade clássica de uma plataforma de streaming: fundo quase preto, texto branco e destaque vermelho. O arquivo CSS centraliza essas cores e aplica o fundo escuro ao corpo da página.


6. O reset global e o misterioso box-sizing

O projeto utiliza:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

O seletor universal * aplica regras a todos os elementos.

Os navegadores incluem margens e espaçamentos padrão em títulos, parágrafos e outros componentes. Ao definir:

margin: 0;
padding: 0;

o desenvolvedor zera esses valores e passa a controlar o layout de forma mais previsível.

Já:

box-sizing: border-box;

resolve um problema histórico do CSS.

Imagine um elemento com:

width: 300px;
padding: 20px;
border: 2px;

No modelo tradicional, a largura total poderia ultrapassar os 300 pixels, pois padding e borda seriam somados à largura declarada.

Com border-box, a largura total permanece dentro dos 300 pixels.

É como reservar um registro de 300 bytes e garantir que os campos internos não ultrapassem o LRECL.

Sem isso, o layout pode sofrer o equivalente visual de um:

IEC141I 013-18

O conteúdo simplesmente não cabe onde deveria.


7. Flexbox: o organizador de filas do HTML moderno

O cabeçalho utiliza Flexbox:

header .container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

Essa combinação organiza o logotipo e o menu na mesma linha.

Vamos interpretar cada instrução.

display: flex

Ativa o modelo Flexbox.

flex-direction: row

Organiza os filhos horizontalmente.

align-items: center

Alinha os itens verticalmente ao centro.

justify-content: space-between

Coloca um item no início, outro no final e distribui o espaço entre eles.

Antes do Flexbox, layouts desse tipo frequentemente dependiam de:

  • float;

  • posicionamento absoluto;

  • tabelas;

  • margens negativas;

  • pequenos pactos com forças ocultas.

Com Flexbox, o navegador assume a responsabilidade de calcular os alinhamentos.

O resultado é um código mais legível e adaptável.

O CSS do LusoFlix emprega Flexbox tanto no cabeçalho quanto na organização da área principal.


8. A imagem de fundo e a técnica do gradiente

A área de destaque é construída com:

background:
    linear-gradient(
        rgba(0, 0, 0, .50),
        rgba(0, 0, 0, .50)
    ),
    url('../img/PortugalViagens.png');

Aqui temos duas camadas.

A primeira é um gradiente preto semitransparente.

A segunda é a imagem de Portugal.

O navegador sobrepõe o gradiente à fotografia.

Por que fazer isso?

Porque textos brancos podem perder legibilidade sobre imagens claras.

A camada escura aumenta o contraste e permite que título, descrição e botões continuem visíveis.

Essa técnica é muito comum em:

  • plataformas de streaming;

  • sites de turismo;

  • páginas de jogos;

  • landing pages;

  • portfólios;

  • vitrines de produtos.

O efeito é simples, mas poderoso.

A fotografia continua aparecendo, porém deixa de competir com a informação textual.

É como diminuir o ruído de uma evidência antes de ampliá-la no laboratório.


9. Botões e microinterações

Os botões são estilizados assim:

.botao {
    background-color: rgba(0, 0, 0, .50);
    border: none;
    color: white;
    padding: 15px 30px;
    cursor: pointer;
    transition: .3s ease all;
}

Quando o ponteiro passa sobre o botão:

.botao:hover {
    background-color: white;
    color: black;
}

Temos aqui uma microinteração.

O usuário movimenta o mouse.

O botão reage.

Essa resposta visual confirma:

Este elemento é clicável.

A propriedade:

transition: .3s ease all;

faz a mudança ocorrer suavemente.

Sem transição, a troca de cores seria instantânea.

Com transição, o navegador interpola os valores ao longo de aproximadamente três décimos de segundo.

Parece um detalhe pequeno.

Mas interfaces agradáveis são construídas justamente com pequenos detalhes.

Uma aplicação não precisa executar uma animação cinematográfica a cada clique.

Às vezes basta confirmar elegantemente que o usuário está no caminho certo.


10. O coração visual: os carrosséis

O LusoFlix organiza o acervo em categorias.

Entre elas aparecem:

  • Portugal;

  • Lisboa;

  • Setúbal;

  • Uma Viagem na História;

  • Castelos e vilas medievais;

  • A religiosidade nas igrejas;

  • Praias e rios.

Cada categoria contém miniaturas de vídeos publicadas em um carrossel horizontal. A página pública apresenta dezenas de links do YouTube distribuídos nessas seções temáticas. (Vagner Bellacosa)

A estrutura básica é semelhante a:

<div class="owl-carousel owl-theme">
    <div class="item">
        <a href="VIDEO">
            <img
                class="box-filme"
                src="MINIATURA"
                title="DESCRIÇÃO"
                alt="DESCRIÇÃO">
        </a>
    </div>
</div>

A classe:

owl-carousel

revela o uso da biblioteca Owl Carousel.

Essa biblioteca JavaScript transforma uma lista comum de elementos em um componente deslizável.

Ela pode controlar:

  • quantidade de itens visíveis;

  • navegação;

  • rolagem;

  • responsividade;

  • velocidade;

  • reprodução automática;

  • comportamento em diferentes tamanhos de tela.

O projeto inclui os arquivos CSS do Owl Carousel e seu tema visual no cabeçalho do documento.

Aqui existe uma importante lição arquitetural.

O desenvolvedor não precisa construir tudo do zero.

Usar uma biblioteca consolidada é equivalente a chamar uma rotina confiável em vez de reescrever a mesma lógica em cada programa.

No mainframe, usamos:

  • SORT;

  • IDCAMS;

  • LE routines;

  • APIs de CICS;

  • serviços de Db2;

  • módulos compartilhados.

Na web, utilizamos:

  • bibliotecas;

  • frameworks;

  • componentes;

  • APIs;

  • pacotes.

Reutilização não é preguiça.

É engenharia.

A única condição é compreender o que a dependência faz e quais riscos ela introduz.


11. Onde está o JavaScript?

O visitante pode olhar o HTML do LusoFlix e pensar:

Onde está toda aquela programação JavaScript prometida?

Grande parte do comportamento interativo está relacionada à inicialização do carrossel e às bibliotecas carregadas.

Em projetos desse tipo, o JavaScript costuma conter uma configuração parecida com:

$('.owl-carousel').owlCarousel({
    loop: true,
    margin: 10,
    nav: false,
    responsive: {
        0: {
            items: 1
        },
        600: {
            items: 3
        },
        1000: {
            items: 5
        }
    }
});

A lógica determina quantos cartões serão apresentados conforme a largura da tela.

Em um celular:

1 item por vez

Em uma tela intermediária:

3 itens

Em um desktop:

5 itens

O JavaScript não precisa ser enorme para ser importante.

Nesse projeto, ele atua como um operador de sala de controle.

O HTML fornece os itens.

O CSS fornece a aparência.

O JavaScript coordena a movimentação e a adaptação dinâmica.

Podemos resumir assim:

HTML       = inventário do catálogo
CSS        = cenografia
JavaScript = operador da esteira

12. O YouTube como backend audiovisual

Uma das decisões mais inteligentes do LusoFlix foi não tentar hospedar os vídeos dentro do próprio GitHub Pages.

Os vídeos permanecem no YouTube.

A página funciona como catálogo e ponto de acesso.

Cada miniatura é envolvida por um link:

<a href="https://www.youtube.com/watch?v=...">
    <img src="img/...">
</a>

Quando o usuário clica, o vídeo é aberto no YouTube.

Arquiteturalmente, temos:

LUSOFLIX
   |
   +-- apresenta catálogo
   |
   +-- organiza categorias
   |
   +-- exibe miniaturas
   |
   +-- encaminha reprodução
           |
           +-- YOUTUBE

Isso reduz:

  • consumo de banda;

  • complexidade de infraestrutura;

  • necessidade de servidor próprio;

  • preocupação com codecs;

  • armazenamento de arquivos pesados;

  • desenvolvimento de um player completo.

O YouTube assume responsabilidades como:

  • streaming adaptativo;

  • disponibilidade;

  • armazenamento;

  • player;

  • legendas;

  • compatibilidade;

  • estatísticas;

  • comentários;

  • inscrições;

  • recomendações.

O LusoFlix assume outra missão:

Organizar e contextualizar o acervo.

É uma arquitetura simples, porém coerente.

O portal não tenta substituir o YouTube.

Ele cria uma camada editorial sobre o conteúdo.


13. O canal como arquivo de uma vida em Portugal

Os vídeos não aparecem como elementos aleatórios.

Eles formam um mapa de experiências.

Na seção dedicada a Lisboa, encontramos temas como:

  • Oceanário de Lisboa;

  • Castelo de São Jorge;

  • Campo Pequeno;

  • Terreiro do Paço;

  • chegada aérea à cidade;

  • Sé Catedral;

  • ruas históricas;

  • museus;

  • imigração;

  • memórias pessoais.

Na categoria histórica surgem referências a:

  • Templo de Diana, em Évora;

  • Tavira;

  • Ponte de Prado;

  • Banco de Portugal em Faro;

  • Vila Real de Santo António;

  • Óbidos;

  • Mosteiro de Santa Maria da Vitória;

  • Guimarães.

Também há seções dedicadas a castelos, vilas medievais, igrejas, santuários, praias, rios e localidades da Margem Sul. Esses temas são identificáveis nos títulos e textos alternativos das miniaturas declaradas no HTML.

O canal, portanto, não é apenas um repositório de vídeos turísticos.

Ele mistura:

  • memória familiar;

  • documentação de viagens;

  • história;

  • arquitetura;

  • patrimônio;

  • religiosidade;

  • cotidiano;

  • deslocamentos;

  • imigração;

  • descobertas pessoais.

Isso torna o LusoFlix parecido com uma videoteca temática.

Cada miniatura funciona como uma ficha de catálogo.

Cada categoria funciona como uma coleção.

Cada clique abre um registro audiovisual.

No mainframe, poderíamos imaginar:

ARQUIVO-MESTRE-DE-VIDEOS

com uma chave lógica composta por:

PAÍS + REGIÃO + CATEGORIA + LOCAL + DATA

O que vemos na tela é apenas a camada de apresentação de um acervo muito maior.


14. As miniaturas como registros indexados

Considere este padrão:

<img
    class="box-filme"
    src="img/Historia0007.png"
    title="Encantos medievais em Obidos e suas belas muralhas"
    alt="Encantos medievais em Obidos e suas belas muralhas">

Há três informações fundamentais:

src

Indica o arquivo da imagem.

title

Apresenta uma dica quando o usuário mantém o cursor sobre a miniatura.

alt

Fornece uma descrição alternativa.

O atributo alt é especialmente importante.

Ele pode ser utilizado:

  • por leitores de tela;

  • quando a imagem não carrega;

  • por mecanismos de busca;

  • para contextualização semântica.

Um alt vazio ou genérico desperdiça informação.

Em vez de:

alt="imagem"

é melhor usar:

alt="Vista das muralhas medievais de Óbidos, Portugal"

Isso melhora acessibilidade e SEO.

No LusoFlix, muitas miniaturas já possuem descrições individualizadas, demonstrando a intenção de contextualizar o conteúdo visual.


15. SEO: deixando pistas para os mecanismos de busca

O documento inclui diversas meta tags:

<meta name="Author" content="Vagner Bellacosa">

<meta
    name="Description"
    content="Aplicação dos comandos HTML, CSS e JavaScript...">

Também existem propriedades Open Graph:

<meta property="og:title" content="LusoFlix - Viagens a Portugal">
<meta property="og:site_name" content="LusoFlix">
<meta property="og:description" content="...">
<meta property="og:image" content="...">
<meta property="og:type" content="article">

Essas propriedades ajudam plataformas sociais a gerar uma prévia quando a página é compartilhada.

Sem Open Graph, um link pode aparecer apenas como uma URL seca.

Com os metadados corretos, o compartilhamento pode apresentar:

  • título;

  • descrição;

  • imagem;

  • identificação do site.

É como anexar uma capa, um resumo e uma classificação ao registro antes de enviá-lo para outro sistema.

O projeto também declara autoria, palavras-chave, descrição, imagem social, seção temática e endereço canônico utilizado no compartilhamento.

Atualmente, a meta tag keywords possui pouco peso nos grandes mecanismos de busca, mas a descrição, o título, o conteúdo visível, os cabeçalhos, o texto alternativo e a estrutura semântica continuam importantes.

Uma evolução moderna poderia incluir:

<link
    rel="canonical"
    href="https://vagnerbellacosa.github.io/002_WebDeveloper_ReplicaNetflix/">

E também dados estruturados em JSON-LD:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "CollectionPage",
  "name": "LusoFlix",
  "description": "Catálogo de vídeos sobre Portugal",
  "inLanguage": "pt-BR"
}
</script>

Isso ajudaria os mecanismos de busca a compreenderem que a página representa uma coleção temática.


16. GitHub Pages: o pequeno data center gratuito

O LusoFlix está publicado por meio do GitHub Pages.

Essa solução permite transformar um repositório GitHub em um site estático acessível publicamente.

O fluxo básico é:

ARQUIVOS LOCAIS
      |
      v
GIT COMMIT
      |
      v
GIT PUSH
      |
      v
REPOSITÓRIO GITHUB
      |
      v
GITHUB PAGES
      |
      v
SITE PUBLICADO

Para projetos HTML, CSS e JavaScript que não dependem de processamento no servidor, o GitHub Pages é extremamente útil.

Ele pode hospedar:

  • portfólios;

  • documentação;

  • páginas institucionais;

  • demonstrações;

  • laboratórios;

  • currículos;

  • catálogos;

  • jogos JavaScript;

  • páginas educacionais;

  • protótipos.

O repositório do LusoFlix contém diretórios separados para imagens, JavaScript e estilos, além do index.html, documentação, licença e histórico de commits. (GitHub)

Essa organização já introduz boas práticas:

/index.html
/img
/js
/style

É simples, direta e compreensível para quem está começando.


17. O que o HTML moderno permite fazer?

O LusoFlix demonstra uma parte do poder da web, mas o HTML moderno permite ir muito além.

Hoje, um navegador é quase uma pequena plataforma operacional.

Com tecnologias abertas, podemos criar:

  • players de vídeo;

  • editores;

  • jogos;

  • dashboards;

  • aplicativos offline;

  • mapas;

  • gráficos;

  • sistemas de voz;

  • videoconferência;

  • reconhecimento de dispositivos;

  • armazenamento local;

  • notificações;

  • aplicações instaláveis;

  • experiências tridimensionais.

Vamos examinar algumas possibilidades.


18. Vídeos incorporados diretamente na página

O próprio código possui um comentário indicando uma intenção futura de incorporar vídeos do YouTube ao corpo da página.

Isso poderia ser feito com:

<iframe
    src="https://www.youtube.com/embed/ID_DO_VIDEO"
    title="Vídeo sobre Portugal"
    loading="lazy"
    allowfullscreen>
</iframe>

A vantagem seria permitir a reprodução sem abandonar o LusoFlix.

Uma evolução ainda melhor seria abrir o vídeo em uma janela modal:

CLIQUE NA MINIATURA
        |
        v
ABRE MODAL
        |
        v
CARREGA PLAYER
        |
        v
REPRODUZ VÍDEO

O JavaScript poderia capturar o clique:

const cards = document.querySelectorAll('[data-video]');

cards.forEach(card => {
    card.addEventListener('click', () => {
        abrirVideo(card.dataset.video);
    });
});

Assim, cada cartão receberia:

<button data-video="ylPVYS7Rgyg">
    <img src="img/portugal0001.png" alt="Elvas">
</button>

O uso de button seria semanticamente melhor quando a ação não fosse navegar, mas abrir uma interface interna.


19. Carregamento preguiçoso de imagens

Uma página com dezenas de miniaturas pode consumir muitos recursos.

O HTML moderno oferece:

<img
    src="img/miniatura.png"
    loading="lazy"
    alt="Descrição do vídeo">

Com loading="lazy", o navegador adia o carregamento de imagens que ainda estão fora da área visível.

Isso melhora:

  • tempo inicial de abertura;

  • consumo de banda;

  • experiência em celulares;

  • desempenho;

  • métricas de carregamento.

É semelhante a não carregar um arquivo inteiro quando o programa utilizará apenas alguns registros.

A diferença é que o navegador administra esse acesso sob demanda.


20. Imagens responsivas

O atributo srcset, presente em várias imagens do projeto, pode ser explorado de forma mais completa.

Por exemplo:

<img
    src="img/lisboa-800.jpg"
    srcset="
        img/lisboa-400.jpg 400w,
        img/lisboa-800.jpg 800w,
        img/lisboa-1200.jpg 1200w
    "
    sizes="
        (max-width: 600px) 90vw,
        300px
    "
    alt="Vista histórica de Lisboa">

O navegador escolhe automaticamente a imagem mais apropriada.

Um celular não precisa baixar uma imagem de 3.000 pixels se ela será exibida em um cartão de 300 pixels.

Isso é otimização orientada pelo cliente.


21. CSS Grid: organizando catálogos complexos

O Flexbox é excelente para linhas e alinhamentos.

O CSS Grid é especialmente poderoso para layouts bidimensionais.

Uma futura página de pesquisa do LusoFlix poderia utilizar:

.catalogo {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

Essa única regra cria uma grade adaptável.

Os cartões se reorganizam conforme a largura disponível.

Em desktop:

[1] [2] [3] [4] [5]

Em tablet:

[1] [2] [3]
[4] [5]

Em celular:

[1]
[2]
[3]

Sem calcular manualmente cada posição.

É uma revolução quando comparada às antigas tabelas HTML utilizadas para diagramar páginas.


22. Busca dinâmica com JavaScript

Imagine um campo:

<input
    type="search"
    id="busca"
    placeholder="Pesquisar Lisboa, castelos, praias...">

O JavaScript poderia filtrar os cartões:

const busca = document.querySelector('#busca');
const videos = document.querySelectorAll('.video-card');

busca.addEventListener('input', evento => {
    const termo = evento.target.value.toLowerCase();

    videos.forEach(video => {
        const texto = video.textContent.toLowerCase();
        video.hidden = !texto.includes(termo);
    });
});

O usuário poderia digitar:

castelo

e visualizar apenas os vídeos relacionados.

Isso transformaria o catálogo estático em uma interface de consulta.

O equivalente mainframe seria sair de uma listagem sequencial e criar uma pesquisa indexada.


23. Catálogo alimentado por JSON

No código atual, cada vídeo é declarado manualmente no HTML.

Funciona, mas gera repetição.

Uma arquitetura moderna poderia armazenar o catálogo em JSON:

[
  {
    "titulo": "Castelo de São Jorge",
    "categoria": "Lisboa",
    "videoId": "rjypUMC2RxI",
    "imagem": "img/lisboa0002.png"
  },
  {
    "titulo": "Templo de Diana em Évora",
    "categoria": "História",
    "videoId": "gLpjM3Xn2Rk",
    "imagem": "img/Historia0001.png"
  }
]

O JavaScript carregaria esses dados:

fetch('./data/videos.json')
    .then(resposta => resposta.json())
    .then(videos => montarCatalogo(videos))
    .catch(erro => console.error(
        'Falha ao carregar catálogo:',
        erro
    ));

A página seria criada dinamicamente.

As vantagens seriam:

  • menos repetição;

  • manutenção facilitada;

  • filtros;

  • ordenação;

  • busca;

  • geração automática de categorias;

  • possibilidade de integrar APIs.

Em termos de arquitetura:

ANTES
HTML = estrutura + dados + catálogo

DEPOIS
HTML = estrutura
CSS  = apresentação
JSON = dados
JS   = montagem e comportamento

Essa separação lembra a divisão entre programa, arquivo e camada de apresentação.


24. Progressive Web App: um LusoFlix instalável

Com um arquivo de manifesto e um Service Worker, o LusoFlix poderia se tornar uma Progressive Web App, ou PWA.

Isso permitiria:

  • instalação na tela inicial;

  • ícone próprio;

  • abertura semelhante a aplicativo;

  • cache de arquivos;

  • funcionamento parcial offline;

  • carregamento mais rápido em visitas futuras.

Um manifesto básico poderia declarar:

{
  "name": "LusoFlix",
  "short_name": "LusoFlix",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#141414",
  "theme_color": "#E50914"
}

O Service Worker poderia armazenar:

  • HTML;

  • CSS;

  • JavaScript;

  • logotipo;

  • imagens principais.

Naturalmente, os vídeos do YouTube ainda dependeriam de conexão.

Mas a estrutura do catálogo poderia continuar acessível.


25. Acessibilidade: o usuário que não vemos

Uma interface moderna deve ser utilizável por pessoas com diferentes necessidades.

Algumas melhorias possíveis seriam:

Navegação por teclado

Todos os cartões e controles precisam ser alcançáveis com Tab.

Foco visível

a:focus-visible,
button:focus-visible {
    outline: 3px solid white;
    outline-offset: 3px;
}

Botões semanticamente corretos

Evitar colocar <button> dentro de <a> quando uma única ação pode ser representada por um link estilizado.

Por exemplo:

<a class="botao" href="PLAYLIST">
    Assistir agora
</a>

Rótulos descritivos

<a
    href="VIDEO"
    aria-label="Assistir ao vídeo sobre o Castelo de São Jorge">

Contraste

Garantir que textos cinza possuam contraste suficiente sobre o fundo escuro.

Movimento reduzido

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto;
        transition: none;
        animation: none;
    }
}

Uma interface acessível não é uma versão especial do sistema.

É o sistema construído corretamente.


26. Pequenas evidências encontradas no código

Toda investigação encontra detalhes curiosos.

No LusoFlix, alguns pontos merecem atenção.

Há links em determinadas seções nos quais as aspas do endereço parecem não estar encerradas antes de target="_blank".

Um exemplo conceitual do problema seria:

<a href="https://www.youtube.com/watch?v=ABC target="_blank">

O correto é:

<a
    href="https://www.youtube.com/watch?v=ABC"
    target="_blank"
    rel="noopener noreferrer">

Quando usamos target="_blank", também é recomendável adicionar:

rel="noopener noreferrer"

Isso reduz riscos associados à página aberta acessar o contexto da página original.

Também aparecem casos de atributos alt duplicados em algumas imagens.

O navegador normalmente tentará tolerar o erro, mas o HTML deveria manter apenas um atributo:

<img
    src="imagem.png"
    alt="Descrição correta">

Esses problemas não diminuem o mérito do projeto.

Ao contrário.

Eles são parte natural do aprendizado.

Todo código antigo funciona como uma fotografia do conhecimento que tínhamos quando o escrevemos.

Revisitar um projeto anos depois é semelhante a abrir um programa COBOL da década de 1990.

Você encontra:

  • decisões corretas;

  • soluções criativas;

  • limitações da época;

  • convenções antigas;

  • oportunidades de modernização;

  • e comentários que parecem mensagens deixadas por uma versão anterior de nós mesmos.


27. Modernizar sem destruir a personalidade

Uma atualização do LusoFlix não deveria apagar sua origem.

Seria um erro transformá-lo em mais um template genérico, tecnicamente perfeito e emocionalmente vazio.

A modernização ideal preservaria:

  • o nome;

  • o tema português;

  • o vermelho característico;

  • as miniaturas;

  • a divisão por localidades;

  • a conexão com o canal;

  • o caráter de diário audiovisual;

  • a simplicidade do projeto original.

Ao mesmo tempo, poderia adicionar:

  • modal de reprodução;

  • busca;

  • filtros;

  • carregamento dinâmico;

  • catálogo JSON;

  • melhor responsividade;

  • acessibilidade;

  • lazy loading;

  • dados estruturados;

  • página individual para cada vídeo;

  • favoritos em localStorage;

  • compartilhamento pela Web Share API;

  • modo claro e escuro;

  • mapa interativo de Portugal.

A modernização correta não pergunta:

Como substituímos tudo?

Ela pergunta:

O que merece permanecer e o que precisa evoluir?

Essa é a mesma pergunta feita em qualquer projeto sério de modernização de legado.


28. Um mapa interativo para as viagens

Uma expansão fascinante seria relacionar vídeos a localidades geográficas.

Cada registro poderia possuir:

{
  "titulo": "Castelo de São Jorge",
  "cidade": "Lisboa",
  "latitude": 38.7139,
  "longitude": -9.1335,
  "videoId": "..."
}

Uma biblioteca de mapas poderia apresentar marcadores em:

  • Lisboa;

  • Setúbal;

  • Évora;

  • Tavira;

  • Faro;

  • Óbidos;

  • Guimarães;

  • Fátima;

  • Sintra;

  • Tomar;

  • Leiria;

  • Elvas.

O visitante poderia clicar em um ponto do mapa e abrir o vídeo correspondente.

A experiência deixaria de ser apenas um catálogo linear.

Tornar-se-ia uma viagem digital.

MAPA
 |
 +-- LISBOA
 |     +-- CASTELO
 |     +-- OCEANÁRIO
 |     +-- BELÉM
 |
 +-- ÉVORA
 |     +-- TEMPLO DE DIANA
 |
 +-- SINTRA
       +-- CASTELO DOS MOUROS

Seria praticamente um KSDS turístico, no qual a chave de acesso seria a localização geográfica.


29. Favoritos com localStorage

O navegador permite armazenar pequenas informações localmente.

Um visitante poderia marcar vídeos favoritos:

const favoritos =
    JSON.parse(localStorage.getItem('favoritos')) || [];

function salvarFavorito(videoId) {
    if (!favoritos.includes(videoId)) {
        favoritos.push(videoId);

        localStorage.setItem(
            'favoritos',
            JSON.stringify(favoritos)
        );
    }
}

Na próxima visita, os favoritos continuariam disponíveis.

Isso não exige banco de dados nem autenticação.

É armazenamento local no navegador.

Naturalmente, possui limitações:

  • os dados ficam naquele dispositivo;

  • podem ser apagados;

  • não são sincronizados;

  • não servem para informações sensíveis.

Mas, para um catálogo pessoal, é uma solução simples e eficiente.


30. Web Share API: compartilhar uma descoberta

Em celulares compatíveis, a Web Share API permite abrir o menu nativo de compartilhamento:

async function compartilhar(video) {
    if (!navigator.share) {
        return;
    }

    await navigator.share({
        title: video.titulo,
        text: 'Conheça este lugar em Portugal',
        url: video.url
    });
}

O visitante poderia compartilhar o vídeo por:

  • WhatsApp;

  • e-mail;

  • redes sociais;

  • aplicativos instalados.

O navegador torna-se uma ponte entre a página e o sistema operacional.


31. O HTML como plataforma, não apenas marcação

Durante muitos anos, ensinar HTML significava apresentar:

<h1>
<p>
<a>
<img>
<table>

Tudo isso continua importante.

Mas a plataforma web moderna inclui muito mais.

O navegador atual oferece recursos para:

  • áudio e vídeo;

  • desenho com Canvas;

  • gráficos vetoriais SVG;

  • comunicação em tempo real;

  • armazenamento;

  • criptografia;

  • localização, mediante autorização;

  • câmera e microfone, mediante autorização;

  • arrastar e soltar;

  • arquivos locais;

  • notificações;

  • execução offline;

  • acessibilidade;

  • animações;

  • componentes personalizados;

  • integração com dispositivos.

O HTML não substitui sozinho Java, C#, COBOL ou Python.

Mas, combinado com CSS e JavaScript, ele se transforma na interface universal de inúmeros sistemas.

O navegador é hoje o terminal de acesso do mundo.

O 3270 conectava o usuário ao mainframe.

O browser conecta o usuário a:

  • nuvens;

  • APIs;

  • bancos;

  • vídeos;

  • aplicações corporativas;

  • inteligência artificial;

  • sistemas governamentais;

  • comércio eletrônico;

  • plataformas educacionais.

Mudou a tela.

A necessidade de arquitetura permaneceu.


32. Um exercício que ensina mais do que parece

À primeira vista, o LusoFlix pode parecer apenas um clone visual criado em um bootcamp.

Mas, ao investigarmos o projeto, encontramos várias disciplinas:

HTML

Estrutura, links, imagens, metadados e semântica.

CSS

Cores, Flexbox, fundos, gradientes, botões, hover e responsividade.

JavaScript

Inicialização de componentes e comportamento do carrossel.

Bibliotecas

Owl Carousel, ícones e dependências externas.

UX

Organização por categorias e ações claramente identificadas.

Arquitetura de conteúdo

Classificação dos vídeos por região e tema.

SEO

Descrição, título, Open Graph e textos alternativos.

DevOps básico

Versionamento com Git e publicação no GitHub Pages.

Produção audiovisual

Integração com vídeos e playlists do YouTube.

Identidade

Transformação de um exercício genérico em uma homenagem pessoal a Portugal.

Isso é desenvolvimento de software.

Não se trata apenas de escrever comandos.

Trata-se de combinar tecnologias para comunicar uma ideia.


33. Passo a passo para um padawan criar seu próprio catálogo

Um desenvolvedor iniciante poderia usar o LusoFlix como referência e seguir esta sequência.

Passo 1 — Escolher um tema

Pode ser:

  • viagens;

  • mainframe;

  • animes;

  • filmes clássicos;

  • cursos;

  • músicas;

  • jogos;

  • patrimônio histórico;

  • receitas;

  • vídeos familiares.

Passo 2 — Criar a estrutura

/projeto
    index.html
    /css
    /js
    /img
    /data

Passo 3 — Montar o HTML sem estilo

Primeiro, crie:

  • cabeçalho;

  • menu;

  • destaque;

  • categorias;

  • cartões;

  • rodapé.

Passo 4 — Aplicar o CSS

Defina:

  • paleta;

  • tipografia;

  • espaçamento;

  • Flexbox;

  • Grid;

  • estados de hover;

  • responsividade.

Passo 5 — Adicionar JavaScript

Implemente:

  • carrossel;

  • busca;

  • filtros;

  • modal;

  • favoritos.

Passo 6 — Trabalhar acessibilidade

Revise:

  • alt;

  • foco;

  • teclado;

  • contraste;

  • títulos;

  • rótulos.

Passo 7 — Melhorar SEO

Inclua:

  • título;

  • descrição;

  • Open Graph;

  • canonical;

  • JSON-LD;

  • conteúdo textual útil.

Passo 8 — Publicar

Use:

  • Git;

  • GitHub;

  • GitHub Pages.

Passo 9 — Testar

Teste em:

  • desktop;

  • celular;

  • tablet;

  • teclado;

  • conexão lenta;

  • imagens desativadas.

Passo 10 — Evoluir

Não tente terminar tudo na primeira versão.

Publique.

Observe.

Melhore.


34. Easter egg localizado

Entre os textos das miniaturas existe uma referência curiosa a:

42 e a resposta

Para os viajantes intergalácticos que carregam uma toalha, o número 42 é a resposta para a pergunta fundamental sobre a vida, o universo e tudo mais.

No LusoFlix, ele aparece associado a uma memória de aniversário.

É um pequeno detalhe, mas combina perfeitamente com a tradição Bellacosa:

  • tecnologia;

  • memória;

  • cultura pop;

  • viagens;

  • uma referência escondida esperando ser descoberta.

Todo bom sistema possui documentação.

Todo grande sistema possui lendas.


35. Conclusão: o clone que deixou de ser clone

O LusoFlix começou como um exercício inspirado na Netflix.

Mas chamar o projeto apenas de clone seria reduzir sua importância.

Tecnicamente, ele demonstra fundamentos essenciais:

  • HTML5;

  • CSS3;

  • Flexbox;

  • variáveis CSS;

  • gradientes;

  • responsividade;

  • bibliotecas JavaScript;

  • carrosséis;

  • integração com conteúdo externo;

  • SEO;

  • GitHub Pages.

Culturalmente, ele faz algo mais valioso.

Organiza lembranças sobre Portugal.

Transforma vídeos dispersos em coleções.

Apresenta Lisboa, Setúbal, castelos, igrejas, praias e cidades históricas como se fossem temporadas de uma grande série documental.

O visitante não encontra apenas cartões clicáveis.

Encontra registros de uma jornada.

E talvez essa seja a principal lição para quem começa a programar para a web.

Você pode aprender HTML criando uma página de exercícios.

Pode aprender CSS copiando um layout.

Pode aprender JavaScript movimentando um carrossel.

Mas o verdadeiro salto acontece quando o projeto deixa de ser uma reprodução e passa a carregar sua identidade.

O LusoFlix usa a linguagem visual de uma plataforma mundial para contar uma história pessoal sobre Portugal.

O código é simples.

A arquitetura é estática.

A infraestrutura é leve.

Mas a ideia é poderosa.

Porque software não é apenas aquilo que o computador executa.

Software também é aquilo que o desenvolvedor decide preservar.

No Bellacosa Mainframe, um registro somente existe enquanto permanece gravado.

Na web, uma memória somente atravessa o tempo quando alguém decide transformá-la em:

<article>
    <h1>Uma história que merece continuar acessível</h1>
</article>

E assim encerramos esta investigação.

O HTML estruturou a cena.

O CSS acendeu as luzes.

O JavaScript colocou o catálogo em movimento.

O YouTube armazenou as imagens do passado.

E o LusoFlix provou que um simples exercício de bootcamp pode se transformar em uma pequena cápsula digital de viagens, afetos e histórias portuguesas.

RETURN-CODE = 0000
CATÁLOGO CARREGADO
MEMÓRIA PRESERVADA
CAFÉ AINDA QUENTE

O texto já está estruturado para publicação no Blogspot, com introdução, análise técnica, exemplos, curiosidades, melhorias e conclusão no estilo Bellacosa Mainframe.

Produção original Bellacosa

LusoFlix: HTML, CSS e JavaScript

Uma coleção sobre desenvolvimento web, estudos em JavaScript, desafios de programação e o projeto LusoFlix, uma experiência visual inspirada nas plataformas de streaming e dedicada às viagens, histórias, castelos e paisagens de Portugal.

  • HTML5
  • CSS3
  • JavaScript
  • GitHub Pages
  • DIO
  • Portugal

Central de exibição

Explore o projeto e os artigos sem sair desta página. Caso o site de origem impeça a exibição em iframe, utilize o botão “Abrir original” abaixo de cada quadro.

Desenvolvimento web, JavaScript e aprendizagem contínua

O LusoFlix é um projeto front-end inspirado na experiência visual de uma plataforma de streaming. Desenvolvido com HTML, CSS e JavaScript, apresenta um catálogo de vídeos sobre Portugal organizado por temas como Lisboa, Setúbal, turismo, gastronomia, castelos, localidades históricas, igrejas, praias e rios.

O projeto demonstra como o HTML estrutura o conteúdo, como o CSS cria a identidade visual e como o JavaScript adiciona comportamento e interatividade. A publicação no GitHub Pages transforma o repositório em uma aplicação acessível diretamente pelo navegador.

JavaScript e plano de estudos

O artigo Dia 7: JavaScript e Plano de Estudos apresenta uma estratégia de aprendizagem baseada em aulas, exercícios, anotações, pesquisas, documentação oficial, repositórios GitHub, depuração no navegador e prática constante.

Bootcamps, desafios e comunidade

O artigo Dia 21: Minha incrível aventura nos desafios da DIO registra experiências com cursos, bootcamps, laboratórios, desafios de programação, VS Code, Node.js, fóruns, mentorias e produção de conhecimento para a comunidade de desenvolvedores.

Juntos, os três conteúdos formam uma pequena trilogia sobre criação, estudo e evolução profissional: primeiro o programador organiza sua aprendizagem, depois enfrenta os desafios e, finalmente, transforma conhecimento em um projeto web publicado.

Bellacosa Mainframe Developer Collection
HTML, CSS, JavaScript, GitHub Pages, educação tecnológica e compartilhamento de conhecimento.
Vagner Renato Bellacosa, IBM Champion e especialista em IBM Mainframe
IBM Z17 SYSTEM ONLINE
Sobre o autor

Vagner Renato Bellacosa

IBM Champion 2026 • Especialista em IBM Mainframe

Vagner Renato Bellacosa trabalha com IBM Mainframe desde 1988 , é IBM Champion e especialista em COBOL, CICS, Db2, z/OS e IBM Z. Compartilha experiências profissionais, conhecimento técnico, história da computação e práticas do universo mainframe para aproximar novas gerações das tecnologias que sustentam empresas, bancos e governos ao redor do mundo.

IBM Champion IBM Z COBOL CICS Db2 z/OS Mainframe desde 1988
GitHub LinkedIn
Inicializando conteúdo...