Actualização do Site: O Diário de Media

Intro

NNNo reino dos portfólios digitais e espaços pessoais online, encontrei um charme particular em explorar diários de media: aqueles catálogos íntimos onde os indivíduos curam e comentam a media que consomem. É uma reviravolta moderna na prática antiga de diarismo, agora expandida para abranger a vasta gama de conteúdo digital que absorvemos diariamente. Esta exploração inspirou-me a vestir o meu chapéu de designer de produtos e embarcar numa aventura criativa.

Durante a minha expedição digital, encontrei o site de James Duke em arcana.computer, que me impressionou com o seu início minimalista e categorização detalhada de media noutro lugar:

O site vibrante e denso em imagens da Anh mostrou um design lúdico com cargas pesadas de imagens que podem tornar-se um desafio, então estou curioso quanto à forma como ela o abordará:

E depois havia a biblioteca de Maggie Appleton, uma abordagem eloquentemente focada em livros que ofereceu outra perspectiva:

Alimentado por estas descobertas, lancei o Sketch — sim, ainda estou a adiar aprender o Figma — e esbocei um plano para o meu diário de media. Culminou num layout visualmente atraente, completo com anotações para orientação do utilizador.

E a versão anotada:

Ao fazer a transição do design para o desenvolvimento, arregaçei as mangas e comecei a trabalhar no VS Code, onde enfrentei vários desafios e oportunidades de aprendizagem.

Desenvolvimento Geral

• A minha primeira tarefa foi gerir a recuperação de dados. O Astro opera de forma assíncrona, o que significa que não espera que os dados carreguem antes de passar para a próxima tarefa. Isto exigiu um equilíbrio cuidadoso de comandos await e async para garantir um manuseamento suave dos dados.
• O design dos cartões de media envolveu recorte de imagens, uma decisão que produz resultados mistos. Mas….posso viver com isso.
• Para abordar a lentidão ocasional das respostas da API, optei por renderização do lado do servidor (SSR) para todo o site. Esta abordagem renderiza páginas no servidor antes de as enviar para o navegador, levando a tempos de carregamento mais rápidos e uma experiência de utilizador mais suave.
• Não vou entrar nos ícones no topo dos designs, pois são auto-explicativos.

Cada tipo de media: livros, jogos, música, filmes e programas de TV é representado pelo seu próprio componente Astro personalizado:

Cartões de Media

1. Cartão de Música

2. Cartão de Jogo

Para videojogos, o Cartão de Jogo extraiu detalhes como o título, desenvolvedor e arte da caixa da API do Giant Bomb. Este processo requer entrada manual, que, embora não seja ideal, é gerível.

3. Cartão de Livro

O Cartão de Livro foi originalmente concebido para apresentar integração com Goodreads, mas a sua API já não estava acessível. Depois considerei o The Storygraph, um serviço fantástico mas sem API. Relutantemente, recorri à API do OpenLibrary, que, embora funcional, necessitava da entrada manual incómoda de ISBNs. Um pequeno ícone forneceu um link directo para a página do OpenLibrary do livro como uma solução temporária até encontrar uma solução melhor.

Tanto a capa do livro como o(s) nome(s) do autor são puxados.

4. Cartão de Filme / Programa de TV

Por fim, o Cartão de Filme/Programa de TV puxa o penúltimo item visualizado do Trakt para contornar uma peculiaridade que omitia o nome do realizador ao buscar a visualização mais recente. O TMDB fornece as imagens, e os ícones de plataforma facilitam pesquisas no JustWatch e Trakt para opções de streaming ou compra.

Entradas do Diário

A secção inferior do site está alojada num ficheiro JSON repleto de entradas…uma solução que pode tornar-se difícil de gerir à medida que o diário cresce, mas uma para o eu futuro lidar.

Todas as entradas têm campos obrigatórios: dia, título, estrelas, descrição e tipo. Os últimos dois também são usados para fins organizacionais em toda a página. Quando uma entrada é classificada com uma estrela - o que significa que realmente não gostei - a estrela fica com um tom assustador de vermelho. No extremo oposto, se der 5 estrelas, ficam com um amarelo agradável.

Entretanto, os campos não obrigatórios variam e não podem ser combinados [por design]. Aqui está como são representados visualmente:

E aqui está o pop-up de letras em acção:

Olhando para a frente, estou a considerar adicionar críticas concisas de quatro palavras como uma referência às citações de letras, tinha um monte guardado, mas perdi-as devido a problemas de sincronização entre os meus dispositivos. Já adicionei espectáculos ao vivo à mistura - e posso fazer mais com eles, talvez incluir um ícone com um pequeno clip. Quem sabe?

E é aí que o projecto está: uma fusão de inspiração, design e desenvolvimento, criando um diário de media pessoal que serve como testemunho dos inúmeros livros, jogos, filmes, música e programas de TV que moldam as minhas experiências.

Aproveita!