 |
| 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 LusoFlix. https://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.
BellacosaFlix Mainframe Developer Collection
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.
Em destaque para desenvolvedores
Três registros de uma jornada que une prática de programação, disciplina de estudos, produção de conteúdo e desenvolvimento web com identidade própria.
LusoFlix — Clone inspirado na Netflix
Projeto desenvolvido com HTML, CSS e JavaScript, inspirado na interface da Netflix. O catálogo organiza vídeos sobre Portugal, Lisboa, Setúbal, história, castelos, igrejas, praias, rios, turismo e gastronomia.
Dia 7 — JavaScript e Plano de Estudos
Um plano prático para estudar programação: assistir às aulas, realizar exercícios, criar repositórios no GitHub, consultar documentação, praticar JavaScript e organizar metas realistas de aprendizagem.
Dia 21 — Minha aventura nos desafios da DIO
O encerramento do desafio de 21 artigos relata experiências com bootcamps, laboratórios, desafios de código, VS Code, Node.js, mentorias, comunidades e a retomada da jornada profissional na tecnologia.
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.
LusoFlix — Projeto HTML, CSS e JavaScript
GitHub PagesNão abriu no quadro? Acesse diretamente o projeto LusoFlix .
Dia 7 — JavaScript e Plano de Estudos
Artigo DIOA DIO pode bloquear a incorporação por segurança. Leia o artigo diretamente na plataforma .
Dia 21 — Minha incrível aventura nos desafios da DIO
Artigo DIOA página não permitiu a exibição? Abra o artigo completo na DIO .
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.
Sem comentários:
Enviar um comentário