Mini Projeto Android
Página estática básica desenvolvida no início da jornada de aprendizado para praticar semântica HTML5, embutimento de mídias e responsividade de imagens.
Sobre o Projeto
O Mini Projeto Android é uma página web simples criada puramente com HTML e CSS básicos. Ele foi desenvolvido como um estudo de caso prático logo no início dos meus estudos de programação, correspondendo a um dos desafios de layout do módulo de fundamentos do Curso em Vídeo.
O site apresenta de forma direta e limpa a história e curiosidades por trás da criação do famoso mascote do sistema operacional do Google, o Bugdroid, passando pelos primeiros rascunhos de Dan Morrill (os Dandroids) até o design final icônico de Irina Blok.
Arquitetura e Decisões Técnicas
Por se tratar de um projeto didático inicial, o foco principal foi dominar o comportamento nativo dos elementos sem a interferência de ferramentas de abstração:
- Manipulação de Mídias e Blocos: O layout adota um contêiner centralizado com largura máxima de
800pxpara garantir conforto de leitura. Os blocos de conteúdo utilizam recuos e alinhamentos justificados para simular a diagramação de um artigo de revista ou blog. - Estilização de Listas: O painel lateral de curiosidades (
<aside>) altera o marcador padrão de bolinhas da lista não ordenada para um caractere de engrenagem customizado via strings de escape Unicode no CSS (list-style-type: '\2699\00A0').
Utilizado para construir uma estrutura semântica limpa, empregando tags como header, article, section, aside e footer para melhorar a acessibilidade.
Responsável pela identidade visual verde temática, aplicação de gradientes lineares, sombras em blocos, carregamento de fontes locais via font-face e ajustes de responsividade.
Desafios e Soluções de Engenharia
Durante a codificação, o maior cuidado foi garantir que mídias pesadas e elementos externos fossem flexíveis:
Desafios Resolvidos
Responsividade de iframes externos
Telas de reprodutores do YouTube incorporadas via iframe possuem largura e altura fixas em pixels por padrão, quebrando o layout em telas de celulares.
Foi criada uma div contêiner com posicionamento relativo e 'padding-bottom: 58%' para simular a proporção 16:9, forçando o iframe a se ajustar de forma absoluta a 100% do espaço disponível.
Direção de arte com a tag picture
Carregar imagens grandes e pesadas projetadas para monitores desktop em conexões móveis lentas de smartphones prejudica a performance.
Utilizei a tag nativa '<picture>' do HTML5 combinada com a diretiva 'media=(max-width: 640px)' para carregar variantes menores e otimizadas das ilustrações automaticamente em telas menores.
Impacto e Resultados
- Layout Fluido: A página pode ser visualizada de forma confortável tanto em telas de monitores de alta resolução quanto em smartphones compactos, sem perda de conteúdo.
- Performance e Semântica: O uso exclusivo de CSS puro e sem scripts externos resulta em um carregamento instantâneo, mantendo uma estrutura de tags limpa e de fácil leitura por motores de busca e tecnologias assistivas.