🟢 6 ª Sessão | 8/Mar/25
1. Visualização dos slides:
Slides disponíveis apenas para visualização
Content available for viewing only
Aprendizagens desta lição:1. História e Evolução da Web
- Primeiro website publicado por Tim Berners-Lee em 1991.
- Criação do World Wide Web Consortium (W3C) para padronizar o HTML.
- Desenvolvimento de tecnologias como Flash, que permitiram experiências mais ricas (depois descontinuado).
2. Planeamento de Websites e Apps
- Antes do desenvolvimento, é essencial:
- Definir objetivos de negócio.
- Identificar a persona e público-alvo.
- Fazer benchmarking (análise da concorrência).
- Planear a estrutura do site (menus, páginas, conteúdos).
- Definir as funcionalidades essenciais.
3. Análise Competitiva
- Para Websites:
- Quem são os concorrentes diretos e indiretos?
- Como estão posicionados nos motores de pesquisa?
- Como comunicam com os clientes e que feedback recebem?
- Como utilizam as redes sociais?
- Para Apps Mobile:
- Como estão estruturadas?
- Como os concorrentes monetizam as apps?
- Utilizam inteligência artificial e machine learning?
- Que experiência de utilizador oferecem?
🔗 Ferramentas para análise competitiva:
- Awwwards – Melhores exemplos de web design.
- Behance – Portfólios de design e inovação.
- Siteinspire – Inspiração para websites.
4. Estrutura de Websites
Exemplo de menu principal:
- Página Inicial – Mensagem principal e Call-to-Action.
- Produtos/Serviços – Explicação detalhada e testemunhos.
- Sobre Nós – História, equipa, missão e valores.
- Contactos – Formulário, mapa, telefone e email.
- Blog – Conteúdo educativo para SEO e engajamento.
🔗 Ferramentas para criação de websites:
- Squarespace – Plataforma intuitiva para criação de sites.
- BuiltWith – Identifica tecnologias utilizadas em sites concorrentes.
5. Design Responsivo vs. Adaptativo
- Design Responsivo: Ajusta-se automaticamente ao tamanho do ecrã (abordagem mais comum).
- Design Adaptativo: Usa layouts fixos para diferentes dispositivos (mais controlo, mas menos flexível).
🔗 Ferramentas para testes cross-browser:
- CrossBrowserTesting – Testa sites em vários navegadores.
- BrowseEmAll – Simulação de compatibilidade.
6. Processo de Web Design
- Planeamento – Ideias e requisitos do projeto.
- Wireframes – Esboço da estrutura do site.
- Maquetas – Design visual antes da implementação.
- Protótipos – Simulação interativa antes do desenvolvimento.
- Programação – Codificação do site.
- Testes – Verificação de compatibilidade, SEO, segurança e usabilidade.
🔗 Ferramentas para tipografia e UX/UI:
- Google Fonts – Biblioteca de fontes gratuitas.
- Alistapart – Boas práticas de design e acessibilidade.
7. Verificação Técnica e SEO
- Checklist de verificação de um site:
- Certificado SSL ativo (HTTPS).
- Responsividade em diferentes dispositivos.
- Configuração correta de cookies e RGPD.
- Imagens otimizadas (ALT tags e compressão).
- SEO básico (meta descriptions, titles, URLs amigáveis).
- Integração com Google Analytics e Facebook Pixel.
🔗 Ferramentas para otimização e análise:
- Google Analytics – Análise de tráfego e comportamento dos utilizadores.
- Google Search Console – Monitorização da performance no Google.
Links Úteis
Bibliotecas de Anúncios para Pesquisa Competitiva:
- 🔗 Plataforma para o Workshop: podes.entrar.pt/preencher
- 🔗 Documentos da Aula: podes.entrar.pt/documentosfeuc