Social Media Hub - Simulador de Tela Mobile
Um projeto prático que simula a interface de um iPhone para navegar por perfis de redes sociais usando HTML e CSS estruturais.
Sobre o Projeto
Desenvolvi este projeto como parte das minhas práticas durante o curso de HTML5 e CSS3 do Curso em Vídeo. A proposta era criar uma espécie de hub ou centralizador de links que simulasse a navegação real por dentro de um aparelho celular (iPhone).
O foco do exercício foi entender as dinâmicas de posicionamento de elementos na tela e aprender a trabalhar com carregamento de conteúdos locais e externos de forma integrada na mesma interface de usuário.
Organização e Escolhas Técnicas
A construção da interface baseou-se inteiramente no uso de tags padrão e folhas de estilo limpas, sem o uso de bibliotecas visuais. A arquitetura de arquivos foi pensada de maneira simples, onde cada rede social possui seu próprio arquivo HTML com uma imagem representativa e um link direto para o respectivo perfil.
Utilizado para criar o esqueleto das páginas de pré-visualização e gerenciar o direcionamento dos links internos para a tela simulada.
Utilizado para fazer o alinhamento centralizado do mockup do celular, o controle de overflow e os efeitos visuais simples de foco nos botões.
Dificuldades Práticas e Soluções
Durante a organização do código, os principais pontos de ajuste foram relacionados à manutenção das proporções visuais do dispositivo simulado para evitar que o conteúdo vazasse.
Desafios Resolvidos
Alimentar a tela interna de forma dinâmica
Eu precisava fazer com que o clique nos botões laterais trocasse o conteúdo visível dentro do desenho do celular sem que a página inteira sofresse um refresh.
Utilizei a propriedade nativa 'target' nos links de ancoragem apontando diretamente para o atributo 'name' de um elemento iframe posicionado no centro do celular, permitindo o carregamento isolado das subpáginas.
Alinhar o iframe sobre a imagem do iPhone
Fazer com que a janela interna contendo os sites ficasse perfeitamente sobreposta à tela do mockup do celular em diferentes resoluções foi difícil no começo.
Combinei o uso de posicionamento absoluto com coordenadas em pixels fixas para delimitar a tela do celular e adotei Media Queries simples para reajustar o tamanho dos ícones e do container geral nas telas de smartphones.
Conclusão
O Social Media Hub foi um excelente laboratório prático para fixar conceitos de posicionamento absoluto, uso de iframes e fluxos básicos de navegação estrutural. Por ser um projeto simples feito no início do meu aprendizado, ele cumpriu bem o papel de me ajudar a compreender visualmente como o navegador lida com caixas e sobreposições de camadas no CSS, servindo como degrau para a criação de layouts futuros mais complexos.