Web e Suas Evoluções: WWW, Web 3.0 e SPA

World Wide Web (WWW)

• A World Wide Web, também conhecida como web, WWW ou W3, refere-se a todos os sites e páginas públicas que os utilizadores podem aceder através da internet.
• A WWW é como um grande livro eletrónico com páginas armazenadas em servidores diferentes em todo o mundo.
• As páginas e documentos interligados na WWW são visualizados através de hiperligações.
• A WWW é parte da internet.
• A WWW utiliza o Hypertext Transfer Protocol (HTTP) para comunicar entre servidores e clientes.
• A linguagem HTML é crucial para a criação de documentos e páginas web.

Web 3.0

• A web 3.0 ainda está em desenvolvimento e é uma visão para websites mais inteligentes.
• Busca a interligação de dados e a sua compreensão pelas máquinas.
• Difere da web 2.0, que é centrada em conteúdo gerado por usuários, ao focar-se na descentralização, colocando a criação de conteúdo nas mãos dos criadores, não nas plataformas.

Single Page Application (SPA)

• A SPA permite um ambiente de navegador para interação, eliminando a necessidade de recarregamento total.
• Exemplos incluem Gmail, Google Maps e Facebook.
• A SPA permite atualizações de apenas partes da página, resultando em um refresh dinâmico do conteúdo.
• O código SPA se baseia em estruturas JavaScript, o que contribui para um alto desempenho.

Multi-Page Application (MPA)

• As MPA são o oposto da SPA.
• Recarregam a página inteira a cada novo acesso.
• São mais usadas para aplicações complexas com grande quantidade de páginas que são atualizadas quando os dados alteram.
• O AJAX (Asynchronous Javascript And XML) permite que as MPA sejam rápidas e dinâmicas, atualizando a página sem recargas completas.

Vantagens da SPA em relação à MPA

• Melhor experiência do usuário: menos recargas completas, fluidez na navegação.
• Facilidade de uso em dispositivos móveis.
• Performance: os recursos da aplicação não precisam ser recarregados a cada requisição, o que garante maior velocidade.
• Desenvolvimento e Manutenção: frontend e backend não estão tão interligados, permitindo trabalhar em paralelo.
• Reusabilidade do código para desenvolver aplicações móveis.

Desvantagens da SPA em relação à MPA

• Segurança: mais vulneráveis a ataques de malware e scripting.
• Execução de scripts JavaScript: podem gerar erros ou falhas no site se a execução de scripts estiver bloqueada.
• SEO: a indexação das páginas pelos motores de busca pode ser complicada, pois a página HTML é a mesma e a indexação é feita através de tags de título ('h1', 'h2') e meta informações, não necessariamente com o conteúdo.

Considerações para Criar um Site

• Natureza do Conteúdo:
  • Dinâmico: informação atualizada de uma base de dados ou scripts, sem necessidade de alteração do código-fonte.
  • Estático: informação atualizada apenas com alterações no código-fonte.
• Visibilidade:
  • Implementação de SEO (Search Engine Optimization) para aumentar a visibilidade do site nos motores de busca, através de palavras-chave relevantes, meta descrições e URLs amigáveis.
• Responsive Web Design:
  • Design responsivo que se adapta a diversos tamanhos de tela (computadores, tablets, smartphones).
• Portabilidade:
  • O site deve funcionar em diferentes browsers e suportar tecnologias (verificar em http://html5readiness.com ).
• Desempenho:
  • Otimizar o desempenho para garantir carregamento rápido das páginas, controlando o tamanho de arquivos de áudio, vídeo e imagens, e reduzindo o número de requisições ao servidor.
• Acessibilidade:
  • Seguir as diretrizes WCAG (Web Content Accessibility Guidelines) para criar um site acessível a todos os usuários.
  • Segurança:
    • Utilizar certificados SSL, manter o software atualizado, especialmente para sites com transações online.

Web Development

• É o processo de design, construção e manutenção de um website.
• Foca em criar websites cativantes, funcionais, com bom desempenho e uma ótima experiência para o usuário.
• O desenvolvimento web utiliza linguagens como HTML, CSS, PHP, Python e JavaScript.
• Existem três principais tipos de desenvolvimento web: front-end, back-end e full-stack.

Front-End Web Development

• O desenvolvimento web de front-end é conhecido como desenvolvimento do lado do cliente.
• Visa a criação da interface visual, construindo elementos com os quais os usuários interagem.
• Utiliza linguagens como HTML, CSS e JavaScript.
• O foco está em permitir ao usuário visualizar e interagir com o conteúdo web de maneira fácil.

Back-End Web Development

• O desenvolvimento web de back-end é conhecido como desenvolvimento do lado do servidor.
• Gerencia as requisições dos usuários e interage com bases de dados.
• Compreende a criação de sistemas de autenticação e armazenamento de dados, além da arquitetura do sistema.
• Assegura que o sistema funcione conforme o esperado e que os dados sejam acessíveis com segurança para os usuários.

Full-Stack Web Development

• Combina os conhecimentos do desenvolvimento front-end e back-end.
• Responsável pelo desenvolvimento completo de aplicações web, incluindo design, desenvolvimento, testes e implementação.
• O programador full-stack deve ter conhecimento em web design, desenvolvimento web, bases de dados e depuração de websites.
• Acompanham as tendências de desenvolvimento web como blockchain, deep learning e multi-cloud.

Tecnologias Emergentes

• Blockchain: uma estrutura que armazena registos transacionais (blocos) em várias bases de dados (cadeia) numa rede peer-to-peer.
• Deep Learning: técnica de aprendizagem automática que permite que os computadores aprendam com exemplos.
  • Exemplo: usado para carros autônomos.

Este quiz explora a evolução da Web, desde a World Wide Web até a Web 3.0 e a aplicação de páginas únicas (SPA). Aprenda sobre como essas tecnologias mudaram a maneira como interagimos com a Internet. Teste seus conhecimentos sobre protocolos, linguagens e futuras tendências na web.