TW_WWW_20240921.pdf

Tecnologias Web 2024/2025 CTesP em Redes e Sistemas Informáticos (RSI) Tecnologias Web World Wide Web  O que é World Wide Web ou W3? A World Wide Web - também conhecida como web, WWW ou W3 - refere-se a todos os sítios Web ou páginas públicas a que os utilizadores p...

Tecnologias Web 2024/2025 CTesP em Redes e Sistemas Informáticos (RSI) Tecnologias Web World Wide Web  O que é World Wide Web ou W3? A World Wide Web - também conhecida como web, WWW ou W3 - refere-se a todos os sítios Web ou páginas públicas a que os utilizadores podem aceder nos seus computadores locais e noutros dispositivos através da Internet. Estas páginas e documentos estão interligados por meio de hiperligações em que os utilizadores clicam para obter informações. Esta informação pode estar em diferentes formatos, incluindo texto, imagens, áudio e vídeo. O termo World Wide Web não é sinónimo de Internet. Pelo contrário, a World Wide Web faz parte da Internet.  Como é que a World Wide Web funciona? A World Wide Web é constituída por múltiplos componentes que permitem aos utilizadores aceder a vários recursos, documentos e páginas Web na Internet. Assim, a WWW é como um grande livro eletrónico cujas páginas são armazenadas ou alojadas em diferentes servidores em todo o mundo. Estas páginas e documentos estão interligados por meio de hiperligações em que os utilizadores clicam para obter informações. Estas páginas são o principal componente ou elementos constitutivos da WWW e estão ligadas entre si através de hiperligações, que permitem o acesso de um ponto específico de um documento de hipertexto ou hipermédia a outro ponto desse mesmo documento ou de um documento diferente. As hiperligações são outro conceito que define a WWW e fornecem a sua identidade como uma coleção de documentos interligados. O hipertexto (Hypertext) é um método de referência cruzada de informação instantânea que suporta as comunicações na Web. O hipertexto facilita a ligação entre o conteúdo de uma página Web e o conteúdo de outra página ou sítio Web. O hipertexto e o HTTP (Hypertext Transfer Protocol) permitem que as pessoas acedam aos milhões de sítios Web ativos na WWW. HTTP - URL - URI O Hypertext Transfer Protocol (HTTP) é outro componente fundamental da WWW. Permite que os utilizadores acedam a páginas Web através da normalização das comunicações e da transferência de dados entre os servidores e os clientes da Internet. Cada URL é também um URI, mas não o contrário. contrário A maioria dos documentos e páginas Web são criados utilizando a Hypertext Markup Language (HTML), uma forma baseada em texto de descrever a estrutura do conteúdo de um ficheiro HTML. O HTML descreve a estrutura das páginas Web utilizando elementos ou etiquetas e apresenta o conteúdo dessas páginas através de um browser. Para aceder a uma destas páginas, um utilizador e a sua “client machine” fornecem um identificador universal ao servidor Web através de browser. Este identificador pode ser um Universal Resource Locator (URL) ou um Universal Resource Identifier (URI) e é único para cada página Web. URL – URI - URN Um conjunto de páginas Web pertencentes a um URL é designado por website. Por exemplo, www.isec.pt é um website Enquanto que https://www.isec.pt/pt/instituto/#lnkEstatutos é uma página Web. O browser aceita o URL ou URI fornecido pelo utilizador e comunica-o ao servidor Web. O servidor recupera então a página Web associada a esse URL ou URI e apresenta-a ao utilizador na janela do browser da sua máquina cliente (client machine).  World Wide Web vs Internet A Internet incorpora infraestruturas de apoio e outras tecnologias que ligam redes, websites e utilizadores entre si. Em contrapartida, a WWW é um modelo ou plataforma de comunicações que permite aceder ou trocar informações na Internet através de HTTP. Através da WWW, os utilizadores podem aceder a páginas Web através da Internet seguindo uma série de ligações HTTP. Para aceder e visualizar estas páginas, os utilizadores precisam de utilizar o browser instalado no computador, como o Microsoft Edge, o Google Chrome, o Mozilla Firefox ou o Safari. Tanto a Internet como a Web funcionam num modelo cliente- servidor (client-server). Um servidor é um programa que aceita pedidos de outros computadores, conhecidos como clientes, na rede para armazenar e transmitir documentos.  Evolução da WWW A primeira geração da Web, a Web 1.0, que Berners-Lee definiu originalmente em 1989, não tinha conteúdo de vídeo e tinha um formato de página semelhante ao de uma página impressa. A Web 1.0 era essencialmente estática e centrava-se no fornecimento de informações. Por volta do início do século XXI, a Web 2.0 inaugurou uma nova era, mais interativa e dinâmica do que a anterior, centrada na colaboração entre utilizadores, na conetividade universal da rede e nos canais de comunicação. Com a rápida evolução dos smartphones, o acesso à Internet móvel e às redes sociais impulsionaram o crescimento da Web 2.0. As aplicações - como o Facebook, o YouTube, o Airbnb, o TikTok, o Twitter e o Uber - aumentaram a interatividade e a utilidade online. Com o grande objetivo de criar websites mais inteligentes, onde os dados são interligados e compreendidos pelas máquinas, a Web 3.0 ainda está a dar os primeiros passos e ainda não foi totalmente definida. Ao contrário da Web 2.0, que inclui aplicações e sítios Web que implicam conteúdos gerados pelo utilizador, espera-se que a Web 3.0 seja totalmente descentralizada, o que coloca a criação de conteúdos nas mãos dos criadores e não dos proprietários das plataformas.  Desenvolver uma app ou website com SPA ou MPA? O que é SPA? SPA ou Single Page Application permite trabalhar dentro de um browser, eliminando a necessidade de recarregar uma página quando o utilizador a está a usar. Os fornecedores de correio eletrónico, nomeadamente o Gmail, as aplicações de navegação, como o Google Maps, e as plataformas de redes sociais, como o Facebook, são alguns exemplos de SPAs. Conforme a imagem, com SPA partes da aplicação ou página web é que são atualizadas (refresh) com novos conteúdos ou informação. O código que o SPA mantém baseia-se em estruturas JavaScript, que é a razão do elevado desempenho do SPA.  Desenvolver uma app ou website com SPA ou MPA? O que é MPA? O oposto de SPA é MPA ou Multi-Page Application, que recarrega cada vez que o utilizador abre uma nova página no browser. As MPA são mais utilizadas para aplicações massivas, uma vez que podem consistir num grande número de páginas que são atualizadas sempre que os dados nelas contidos são alterados. As MPA são consideradas a forma convencional de desenvolvimento de aplicações. Com os desenvolvimentos do AJAX (Asynchronous Javascript And XML), os programadores podem criar páginas rápidas e dinâmicas em MPA que trocam uma pequena quantidade de dados com o servidor, de modo a que a página se mantenha atualizada, sem ser recarregada sempre que os dados sejam alterados.  SPA vs MPA? Desvantagens SPA vs MPA Segurança São muito mais vulneráveis a ataques e malware, por ter como base o Javascript/scripts Execução de scripts JavaScript O site ou a página web pode não funcionar ou funcionar parcialmente se a execução de scripts esteja bloqueada no browser Vantagens SPA vs MPA SEO (Search (Search Engine Optimization) Optimization) Melhor experiência do utilizador A indexação das páginas pelos motores de busca pode ser dificultada, Menos atualizações da página completa e maior fluidez porque com SPA como a página HTML é mesma e a indexação é feita Facilidade de utilização em dispositivos móveis através das heading tag (h1, h2), dos títulos e meta informações das páginas, … Performance Não requerem que os recursos da aplicação sejam recarregados sempre que há um pedido de conteúdo por parte do utilizador, pelo que são mais rápidos Desenvolvimento/Manutenção O frontend e o backend não estão tão inter-relacionados, o que significa que ser pode ter equipas a trabalhar em ambas as frentes simultaneamente O código é reutilizável se pretendermos utilizá-lo para desenvolver uma aplicação móvel  Considerações essenciais para criar um site Natureza do conteúdo Visibilidade Dinâmico: a informação apresentada vem de uma base de dados ou através Implementar práticas de SEO (Search Engine Optimization) para aumentar a de scripts, portanto sem necessidade de alterar o código fonte visibilidade do site nos motores de busca, utilizando palavras-chave relevantes, meta descrições e URL’s amigáveis Estático: a informação só é atualizada se houver alterações ao código fonte Responsive Web Design Portabilidade Entender que os browsers têm diferentes suportes às diversas tecnologias Design Responsivo, isto é, o design do site deve-se adaptar/ajustar (http://html5readiness.com) automaticamente a qualquer tamanho de ecrã ou janela de visualização(viewport), de forma eficaz (Ex: computador, tablets, Deve-se aplicar o progressive enhancement, que permite que o smartphones) conteúdo/informação básica esteja sempre disponível, evitando problemas de performance e visualização em dispositivos mais lentos e em browsers com Desempenho funcionalidades limitadas Otimizar o desempenho, garantindo que as páginas carregam rapidamente. A otimização passa por ter em atenção ao tamanho dos ficheiros de áudio, vídeo Acessibilidade e imagens, como também sempre que possível reduzir os requests ao servidor Seguir as diretrizes de acessibilidade da WCAG (Web Content Accessibility Guidelines) de forma a criar um ambiente online mis inclusivo e acessível a Segurança todos os utilizadores, independentemente das suas habilidades ou limitações Deve pode ser assegurada utilizando certificados SSL, manter o software Texto alternativo para imagens, legendas e transições, navegação por teclado, atualizado, principalmente se envolver transações online formulários acessíveis tamanho ajustável do texto, entre outros  Web Development É o processo de conceção, construção e manutenção de um website, com o objetivo de desenvolver um website cativante, funcional, que tenha um bom desempenho e ofereça uma excelente experiência ao utilizador. Os programadores Web utilizam diferentes linguagens, como HTML, CSS, PHP, Python e JavaScript, para criar websites modernos. É crucial compreender os três principais tipos de desenvolvimento Web. Geralmente, os diferentes tipos de programadores Web são competentes para trabalhar com vários tipos de desenvolvimento, de acordo com os seus conhecimentos e competências. Front-End web development Back-End web development Full-stack web development Front-End Web Development O desenvolvimento web de front-end é conhecido como desenvolvimento web do lado do cliente. É o processo de conceber, construir e testar a parte visual de uma aplicação web ou móvel para criar interfaces usadas pelos utilizadores para interagir com um sistema. Envolve uma variedade de linguagens de programação, ferramentas de design e estruturas de teste tais como HTML, CSS e JavaScript. O objetivo do desenvolvimento do front-end é permitir que os utilizadores leiam e visualizem o conteúdo web sem esforço. Para criar uma interface interativa, os programadores front- end/web designers têm de escrever um código eficiente e limpo. Back-End Web Development O desenvolvimento web de back-end é conhecido como desenvolvimento web do lado do servidor. Trata dos pedidos dos utilizadores e interage com as bases de dados, isto inclui tudo, desde o desenvolvimento da arquitetura do sistema até à escrita de código para suportar a autenticação do utilizador e o armazenamento de dados. É uma componente crítica do desenvolvimento de aplicações web, uma vez que garante que o sistema funciona como esperado e cumpre todos os requisitos. É também responsável por garantir que todos os dados são armazenados de forma segura e acessíveis aos utilizadores. Full-stack Web Development Desenvolvimento do front-end e do back-end, isto é, o processo de desenvolvimento de uma aplicação Web do início ao fim, incluindo a conceção, o desenvolvimento, o teste e a implementação de todos os componentes necessários. O programador web full-stack deve ter conhecimentos de web design, desenvolvimento Web, base de dados e website debugging. As responsabilidades dos programadores Full-stack consistem em procurar as tendências de desenvolvimento web como blockchain, deep learning e multi-cloud, dependendo dos projetos. A tecnologia Blockchain é uma estrutura que armazena registos transacionais, também conhecidos como blocos, do público em várias bases de dados, conhecidas como a "cadeia", numa rede ligada através de nós peer-to-peer. Deep Learning é uma técnica de aprendizagem automática que ensina os computadores a fazer o que é natural para os humanos: aprender através do exemplo. É uma tecnologia chave por detrás dos carros sem condutor, permitindo-lhes reconhecer um sinal de stop ou distinguir um peão de um poste de iluminação.